CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
xeraphim
xeraphim

Reputation: 4645

React chip input field

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

Upvotes: 8

Views: 13474

Answers (3)

Jaye Renzo Montejo
Jaye Renzo Montejo

Reputation: 1862

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

 <Autocomplete
    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"
      />
    )}
  />

Upvotes: 2

Muhammad Mudassar
Muhammad Mudassar

Reputation: 157

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

Upvotes: 2

Samira
Samira

Reputation: 2733

enter image description here

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"
              />
            )}
          />

Upvotes: 10

Related Questions