I'm trying to disable the default action of adding the elments I selected in select, in the select window, but I don't know how. I'm also not sure how I can pass the key correctly, is the way I have it in MenuItem done correctly? The data I am mapping is a variable that has a new Set with an array of items with a specific name (item). I am using material ui. setOfNewData has no key value so I can't put it there.
I would like to be able to turn this option off.
<FormControl>
<Select multiple value={someCode} onChange={handleOnChange} className={classes.hiddenItem}>
{setOfNewData.ma[((item) => (
<MenuItem key={item} value={item}>
{item}
</MenuItem>
))}
</Select>
</FormControl>
In order to prevent selection on clicking items, you can simply do nothing on handleOnChange
function like this:
const handleOnChange = (e) => {
//do nothing
//setSelectedValue(e.target.value);
};
And for passing the key
to the MenuItem
s, your approach is correct, because your setOfNewData
is an array of unique strings and passing items directly as key={item}
should work.
You can take a look at this StackBlitz for a live working example.