React Material-UI Cookbook

How it works...

The state that holds the value of the chip input field is an array—because there are multiple values. The two actions involved with the chip input state are adding and removing strings from this array. Let's take a closer look at the onAdd() and onDelete() functions, as follows:

const onAdd = chip => {  setValues([...values, chip]);};const onDelete = (chip, index) => {  setValues(values.slice(0, index).concat(values.slice(index + 1)));};

The onAdd() function adds the chip to the array, while the onDelete() function deletes the chip at the given index. The chips are deleted when the Delete icon in the chip is clicked on by the user. Lastly, let's look at the ChipInput component itself, as follows:

<ChipInput className={classes.chipInput} ...