Multiple Select with options as an object array

Question

I have the following component for selecting roles:

export const MultipleSelectChip = ({
  options,
  label,
  error,
  onRolesUpdate,
}: Props) => {
  const theme = useTheme();
  const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]);

  const handleChipChange = (
    event: SelectChangeEvent<typeof selectedOptions>,
  ) => {
    const {
      target: { value },
    } = event;
    setSelectedOptions(
      // On autofill we get a the stringified value.
      typeof value === 'string' ? value.split(',') : value,
    );
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="multiple-chip-label">{label}</InputLabel>
        <Select
          required
          labelId="multiple-chip-label"
          error={error}
          id="demo-multiple-chip"
          multiple
          value={selectedOptions}
          onChange={handleChipChange}
          input={<OutlinedInput id="select-multiple-chip" label={label} />}
          renderValue={(selected) => (
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
              {selected.map((value) => (
                <Chip key={value} label={value} />
              ))}
            </Box>
          )}
          MenuProps={MenuProps}
        >
          {options.map((propOption) => (
            <MenuItem
              key={propOption.id}
              value={propOption.name}
              style={getStyles(propOption, selectedOptions, theme)}
            >
              {propOption.name}
            </MenuItem>
          ))}
        </Select>
        <FormHelperText>Here's my helper text</FormHelperText>
      </FormControl>
    </div>
  );
};

For options I have an array of objects with id and name, the thing is that I want to use the names for displaying the chips and the ids to pass them to the parent component for the add request. I don't know how to get de ids, too.

This is the example: https://codesandbox.io/s/6ry5y?file=/demo.tsx but is using an array of strings instead of an array of objects.

This is how 'options' looks like:

const rolesDummy: Role[] = [
    { id: '61fb0f25-34aa-46c6-8683-093254223dcd', name: 'HR' },
    { id: '949b9b1e-d3f8-45cb-a061-08da483bd486', name: 'Interviewer' },
    { id: 'c09ae2d4-1335-4ef0-8d4b-ee9529796b52', name: 'Hiring Manager' },
  ];

And I need to get back only the selected ids

Thank you!

NearHuscarl · Accepted Answer · 2021-10-06 12:38:24Z

4

If you pass the option as an object, you can render each MenuItem with the option.id as a key and the option.name as the label. The MenuItem is identified by an id:

<Select {...}>
  {options.map((option) => (
    <MenuItem key={option.id} value={option.id}>
      {option.name}
    </MenuItem>
  ))}
</Select>

To display the name in the selected Chip. Use renderValue, but it only provides you the selected values (array of option.id), so you need to find the option to get the name:

renderValue={(selected) => {
  return (
    <Box>
      {selected.map((value) => {
        const option = options.find((o) => o.id === value);
        return <Chip key={value} label={option.name} />;
      })}
    </Box>
  );
}}

Now you can get an array of selected ids by adding a change handler:

onChange={e => console.log(e.target.value)}

edited Oct 6, 2021 at 12:38

answered Oct 6, 2021 at 12:26

NearHuscarl

83.1k24 gold badges321 silver badges291 bronze badges

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

Collectives™ on Stack Overflow

Multiple Select with options as an object array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related