Dropdownlist alternative in material UI of react - reactjs

Question

I am currently using simple-menu of material UI as shown in the codesandbox here. In my react app, I am displaying this menu in a primereact dialog.
However, my main requirement is to display a dropdown list in a dialog so that when a user selects something, it can be selected and I can do something based on that.
For example, if a user selects Car, I can see it selected. Also, I have some values associated with each entries.
For example, Company has value 0,Car has value 1 and Office has value 2.
So I am planning to have some buttons in the dialog so that after an item from the list is selected, and Ok button is selected, I can send the value associated with the selected item in a webservice call.
The closest I could find is simplelist:
https://material-ui.com/components/lists/#simple-list
But nothing close to Drowpdown list. Am I missing on something here?
More info:
The dialog looks like this:
And let's say, when I select an item, let's say, Car, it won't show Car but will display Open Menu which I am not looking for.

Answer 1

What I have achieved is when the dropdown is opened and some option is selected then users can see what they have selected and dropdown doesn't close when some option is selected and in the console you can see what option is selected by index number.
You can follow this code:
import React, { useState } from "react";
import Button from "#material-ui/core/Button";
import Menu from "#material-ui/core/Menu";
import MenuItem from "#material-ui/core/MenuItem";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
}
}));
export default function SimpleMenu() {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [visval, setVisval] = useState("Open Menu");
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
//console.log(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const classes = useStyles();
const [selectedIndex, setSelectedIndex] = React.useState();
const handleListItemClick = (event, index) => {
setSelectedIndex(index);
handleClose();
//console.log(index);
if (index === 0) {
setVisval("Company");
} else if (index === 1) {
setVisval("Car");
} else {
setVisval("Office");
}
};
return (
<div>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
>
{visval}
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem
data-my-value={1}
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
>
Company
</MenuItem>
<MenuItem
data-my-value={2}
selected={selectedIndex === 1}
onClick={(event) => handleListItemClick(event, 1)}
>
Car
</MenuItem>
<MenuItem
data-my-value={3}
selected={selectedIndex === 2}
onClick={(event) => handleListItemClick(event, 2)}
>
Office
</MenuItem>
</Menu>
</div>
);
}
You can checkout the updated and working codesandbox here
EDIT :
I have achieved what you asked i.e, the menu showing the three options should close when we select some option and the same should be visible in the place of Open Menu. But what I saw is that the code is no longer reusable and is becoming too large (I was aware of it).
If you want your code to be minimised then follow the bellow suggestion
SUGGESTION :
I saw that Material-ui's autocomplete just does the work with a clean code.
It gives you a set of options like a dropdown menu and when the user select's something the selected option is seen by the user.
Link to the Working Demo
You can migrate the same code into your dialog's content it will work fine.