How to add chips value in an array in ReactJs

Chips Example

Chips are compact elements that represent an input, attribute, or action.

An example of rendering multiple Chips from an array of values. Deleting a chip removes it from the array. Note that since no onClick property is defined, the Chip can be focused, but does not gain depth while clicked or touched.

There are some basic steps to implement chips in ReactJs.

$ npm i --save material-ui-chip-input@next
import ChipInput from "material-ui-chip-input";
constructor(props) {
super(props);
this.state = {
tags: []
};
// Add Chips
handleAddChip = (chip) => {
this.setState({
tags: [...this.state.tags, chip]
});
}
// Delete Chips
handleDeleteChip = (chip) => {
this.setState({
tags: _.without(this.state.tags, chip)
});
}

In this function, I am using the underscore library for delete value from the array you can use any other or basic javascript function.

<ChipInput
label="Video Tags"
value={this.state.tags}
onAdd={(chip) => this.handleAddChip(chip)}
onDelete={(chip, index) => this.handleDeleteChip(chip, index)}
/>
Demo
Inspect State

That’s it for this time! I hope you enjoyed this post. As always, I welcome questions, notes, comments and requests for posts on topics you’d like to read. See you next time! Happy Coding !!!!!!

I’m a MERN Developer. ( Redux | AWS | Python ) I enjoy taking on new things, building skills, and sharing what I’ve learned.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store