reactjs - Material-UI Autocomplete rendered values

Question

I have a ReactJs app that use a Material-UI Autocomplete component with multiple values and checkboxes totally like their code snippet :

<Autocomplete
      multiple
      id="checkboxes-tags-demo"
      options={top100Films}
      disableCloseOnSelect
      getOptionLabel={(option) => option.title}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.title}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={(params) => (
        <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
      )}
    />

After checking a values, that value will be rendered in a chip with a "X" button like this:

How can I change the props so the rendered values will be shown like "Value A, Value B, "Value C" with comma between them and no other styling?

Thank you for your time

Answer 1

provide autocomplete RenderTags prop:

Signature:

function(value: T[], getTagProps: function) => ReactNode
value: The value provided to the component.
getTagProps: A tag props getter.

in your case:

renderTags={(values) => 
  values
  .map(value => value.title)
  .join(', ')
}