material-ui using Autocomplete with diff value,option type

You can do this by setting the renderTags property on the Autocomplete component:

renderTags={(value, getTagProps) => (
  <>
  {value.map((id, index) => (
    <Chip
      label={values.find(o => o.id === id)?.name}
      {...getTagProps({index})}
    />
  ))}
  </>
)}

The getTagProps function handles setting the onDelete handler for the Chip. We have to manually set the label for the Chip by finding the option that matches this id and returning its name.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top