React chip input field

Question

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 component 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 component (CreatePoll) while rendering a different component (ForwardRef(Autocomplete))

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

Answer 1

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

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


    import Autocomplete from '@mui/material/Autocomplete';
         <Autocomplete
            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"
              />
            )}
          />

Answer 2

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.com/viclafouch/mui-chips-input

Supports both React 17 / 18 and MUI V5