React Material-UI Multiselect with checkbox cannot select all

Question

I am trying to use Material UI multiselect with checkboxes. So far, I am able to make multiple selects and get the values but I am unable to render the actual names of selected values or get all selected values. Any leads to a new approach I can use or useful links to help get the ids of all selected values in my array will be appreciated.

I created a sandbox that has a mock of my data from an api as well here : sandbox

My select looks like this :

const [selected, setSelected] = useState([]);
  const isAllSelected =
    options.length > 0 && selected.length === options.length;

  const handleChange = (event) => {
    console.log("vals", event.target);
    const value = event.target.value;
    if (value[value.length - 1] === "all") {
      setSelected(selected.length === options.length ? [] : options.title);
      return;
    }
    setSelected(value);
    console.log("values", selected);
  };

<FormControl className={classes.formControl}>
      <InputLabel id="mutiple-select-label">Multiple Select</InputLabel>
      <Select
        labelId="mutiple-select-label"
        multiple
        variant="outlined"
        value={selected}
        onChange={handleChange}
        renderValue={(selected) => selected}
        MenuProps={MenuProps}
      >
        <MenuItem
          value="all"
          classes={{
            root: isAllSelected ? classes.selectedAll : ""
          }}
        >
          <ListItemIcon>
            <Checkbox
              classes={{ indeterminate: classes.indeterminateColor }}
              checked={isAllSelected}
              indeterminate={
                selected.length > 0 && selected.length < options.length
              }
            />
          </ListItemIcon>
          <ListItemText
            classes={{ primary: classes.selectAllText }}
            primary="Select All"
          />
        </MenuItem>
        {options.map((option) => (
          <MenuItem key={option.id} value={option.id}>
            <ListItemIcon>
              <Checkbox checked={selected.includes(option.id)} />
            </ListItemIcon>
            <ListItemText primary={option.title} />
          </MenuItem>
        ))}
      </Select>

      <p>{selected}</p>
    </FormControl>

TheTisiboth · Accepted Answer · 2022-01-11 17:11:51Z

1

I did a few fix in your code so it works, in this sandbox: To display some text in your menu, you are supposed to display the text in the component ListItemText:

<ListItemText>{option}</ListItemText>

An other thing is that you cannot access selected directly, since it is a state, so it is set asynchronously. To solve this, you can simply access it like this:

selected?.length

This way, even if selected is still undefined, it will not throw any errors

answered Jan 11, 2022 at 17:11

TheTisiboth

1,7011 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shiro Over a year ago

Thanks for the pointers, but my array is a bit different from yours so i do not get the same result as your example.

TheTisiboth Over a year ago

Yes, you have to adapt it to your custom array. But you got the general idea now, isn't it? Or is there still something that is blocking ?

shiro Over a year ago

yes, the main problem was that i was using v4 or react material instead of 5

Collectives™ on Stack Overflow

React Material-UI Multiselect with checkbox cannot select all

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related