React Material-UI Multiselect with checkbox cannot select all

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>

options is just an array of strings. You are trying to access properties that don’t exist on each element inside the map.

options is an array of strings, each option is the string.

        {options.map((option) => (
          <MenuItem key={option} value={option}>
            <ListItemIcon>
              <Checkbox checked={selected.includes(option)} />
            </ListItemIcon>
            <ListItemText primary={option} />
          </MenuItem>
        ))}

My option looks like this :

{
      "id": 288,
      "category_id": 3,
      "title": "Test",
      "kpi_unit_of_measure": "%>",
      "updated_by": 9,
      "created_by": 9,
      "date_created": "2021-12-15T21:00:00.000+0000",
      "date_updated": "2022-01-09T21:00:00.000+0000",
      "user_id": 9,
      "account": "Revenue",
      "variance": "green",
      "target": "70",
      "actualYTD": "10",
      "plannedYTD": "10",
      "rootCause": null,
      "action": null,
      "supportRequired": null,
      "categories": {
          "id": 3,
          "description": "Talent and Culture"
      }
  }

When i use ListItemText, my selected values get displayed like an object :

Code :

{kpis && kpis.map((option) => (
    <MenuItem key={option.id} value={option.id}
              classes={{
              root: classes.selectMenuItem,
              selected: classes.selectMenuItemSelectedMultiple,
              }}>
              <ListItemIcon>
          <Checkbox checked={kpi_id.includes(option.id)} />
          </ListItemIcon>
          <ListItemText primary={option.title} title={option.title}> {option.title}</ListItemText> 
    </MenuItem>   
))}

But when i remove the checkbox i can view the title of the option , shouldi display the text in the ListItemText differently?

Code :

{kpis && kpis.map((option) => (
    <MenuItem key={option.id} value={option.id}
              classes={{
              root: classes.selectMenuItem,
              selected: classes.selectMenuItemSelectedMultiple,
              }}>
              {option.title}
    </MenuItem>   
))}

Actually, the problem is that i am using v4 and the feature is in v5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.