[material-ui][Autocomplete] React keys being passed directly to JSX without using spread about material-ui

[danilo-leal]

Hey @Chukwu3meka; thanks for opening the issue! Can you provide a reproducible CodeSandbox for better troubleshooting?

[mj12albert]

Adding key to <Box component="li" mb={1} {...props}> does not solve the issue

Is this what you tried? <Box component="li" mb={1} {...props} key={props.key}> @Chukwu3meka

[bmorales-broditec]

Hi, I have the same issue. I tried @mj12albert's suggestion but it doesn't work for me.

Some of the implementations I have tried and have the same problem:

First

<li {...props}>

// Error
Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, tabIndex: ..., role: ..., id: ..., onMouseMove: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: ..., aria-selected: ..., className: ..., children: ...};
  <li {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {tabIndex: ..., role: ..., id: ..., onMouseMove: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: ..., aria-selected: ..., className: ..., children: ...};
  <li key={someKey} {...props} />

Second

<li key={option.id} {...props}>

// Same error

Third

<li {...props} key={option.id}>

// Error
Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
But I don't have element with repeated id

Fourth

renderOption={(props, option, { selected }) => {
    const customKey = `${option.id} ${option.name}`
    return (
        <li key={customKey} {...props}>
        
 // Same error

Code

<Autocomplete
  disableCloseOnSelect
  fullWidth
  getOptionLabel={(option) => option.name}
  groupBy={(option) => option.wellnessArea.name}
  multiple
  options={getWellnessCategoriesData?.getWellnessCategories || []}
  renderInput={(params) => (
    <TextField
      {...params}
      helperText={
        t.completeProfilePage.wellnessCategories.categoriesHelperText
      }
      label={t.completeProfilePage.wellnessCategories.categoriesLabel}
      placeholder={
        t.completeProfilePage.wellnessCategories.categoriesPlaceholder
      }
      variant="outlined"
    />
  )}
  renderOption={(props, option, { selected }) => (
    <li key={option.id} {...props}>
      <Checkbox
        checked={selected}
        checkedIcon={checkedIcon}
        icon={icon}
        style={{ marginRight: 8 }}
      />
      {option.name}
    </li>
  )}
  size="medium"
/>