I'm using React 17 and tried to use different chip input fields like material-ui-chip-input etc. Unfortunately, all npm packages I tried do not work with react version 17.

Do you know of any ponent that works with this version or how I could create one myself?

Thanks in advance

Edit: I have managed to do what I wanted, but unfortunately, I now get the following error when pressing enter / adding a new item:

index.js:1 Warning: Cannot update a ponent (CreatePoll) while rendering a different ponent (ForwardRef(Autoplete))

Here is the codesandbox which shows the problem: =/src/App.tsx

I'm using React 17 and tried to use different chip input fields like material-ui-chip-input etc. Unfortunately, all npm packages I tried do not work with react version 17.

Do you know of any ponent that works with this version or how I could create one myself?

Thanks in advance

Edit: I have managed to do what I wanted, but unfortunately, I now get the following error when pressing enter / adding a new item:

index.js:1 Warning: Cannot update a ponent (CreatePoll) while rendering a different ponent (ForwardRef(Autoplete))

Here is the codesandbox which shows the problem: https://codesandbox.io/s/passionate-greider-wr9wq?file=/src/App.tsx

• javascript
• reactjs
• material-ui

• I have used this some time back on mui v4, check this lab ponent and mui core – kiranvj Commented Dec 5, 2021 at 6:24

3 Answers 3

why don't you use this instead of a new package? Autoplete exactly do that.

const [receivers, setReceivers] = React.useState<string[]>([]);


    import Autoplete from '@mui/material/Autoplete';
         <Autoplete
            multiple
            onChange={(e, value) => setReceivers((state) => value)}
            id="tags-filled"
            options={top100Films.map((option) => option.title)}
            defaultValue={[top100Films[13].title]}
            freeSolo
            renderTags={(value, getTagProps) =>
              value.map((option, index) => (
                <Chip variant="outlined" label={option} {...getTagProps({ index })} />
              ))
            }
            renderInput={(params) => (
              <TextField
                {...params}
                variant="filled"
                label="freeSolo"
                placeholder="Favorites"
              />
            )}
          />

import React from 'react'
import { MuiChipsInput } from 'mui-chips-input'

const MyComponent = () => {
  const [chips, setChips] = React.useState([])

  const handleChange = (newChips) => {
    setChips(newChips)
  }

  return (
    <MuiChipsInput value={chips} onChange={handleChange} />
  )
}

Source: https://github./viclafouch/mui-chips-input

Supports both React 17 / 18 and MUI V5

Use the freeSolo prop of Autoplete, and just set the options prop to an empty array:

 <Autoplete
    multiple
    freeSolo
    value={value}
    options={[]}
    renderTags={(value, getTagProps) =>
      value.map((option, index) => (
        <Chip label={option} {...getTagProps({ index })} onDelete={()=> /* remove option from value array */} />
      ))
    }
    renderInput={params => (
      <TextField
        {...params}
        variant="outlined"
        label="Add Chip"
        placeholder="Type and press enter"
      />
    )}
  />