Currently, I am utilizing Material UI Chip Input wrapped with Field from react-final-form. https://i.sstatic.net/vJKM1.jpg
The main objective is to restrict the number of "CHIPS" to a maximum of 5.
Chips serve as concise elements representing inputs, attributes, or actions.
For more details, you can refer to the Material UI documentation.
In this setup, there are two distinct states being employed:
- React useState
- Internal states within react-final-form
This approach seems redundant because internal state management is already handled by react-final-form. However, despite my efforts, it hasn't been functioning correctly. This is merely a demonstration of what has been implemented so far.
The issues encountered with this implementation are:
- The chip count limitation does not take effect.
- Field values within react-final-form fail to update upon deleting a chip.
import ChipInput from 'material-ui-chip-input'
import { Field } from 'react-final-form'
const [state, setState] = useState([])
const AddChip = useCallback(
(chip) => {
if (state.length + 1 <= 5) {
setState((prev) => ([...prev.tags, chip]))
}
},
[setState, state.length]
)
const DeleteChip = useCallback(
(chip) => {
setState((prev) => (...prev.state.filter((p) => p !== chip)]
}))
},
[setState]
)
return (
<Field name="states" validate={isRequired} >
{({ input: { value, onChange, ...rest }, meta }) => {
<ChipInput
defaultValue={Array.isArray(value) ? value : []}
onChange={(event) => {
AddChip(event)
onChange(event)
}}
onDelete={DeleteChip}
/>
}}
</Field>
)
Find additional resources here: - Material UI Chip Input package - React Final Form documentation - View the CodeSandbox demo