reactjsmaterial-ui

How do I disable the addition of selected options in select in the select box and how I can pass the keys to the MenuItem?


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>

Solution

  • 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 MenuItems, 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.