React Material-UI Cookbook

There's more...

Rather than having the selected items show up as a comma-separated list of test, you can make the items stand out by mapping the selected values to Chip components. Let's make a component that will handle this:

function Selected({ selected }) {  const classes = useStyles();  return selected.map(value => (    <Chip      key={value}      label={options.find(option => option.id === value).label}      className={classes.chip}    />  ));}

This code block shows how you can use this component in the renderValue property of the Select component:

<Select  multiple  value={selected}  onChange={onChange}  input={<Input id="multi" />}  renderValue={selected => <Selected selected={selected} />}>  {options.map(option => ( <MenuItem key={option.id} value={option.id}> ...