How To Add Chips Value In ReactJs

We will use the material-ui-chip-input package for the chip input.

Let’s build a React application.

–First of all, we have create react application.

–Then create an App.js file inside the src directory.

-After creating the App.js application, Install the required module using the below command.

npm i material-ui-chip-input

Chips are little components that stand in for an input, a property, or an action.

An illustration of rendering many Chips using an array of values A chip can be deleted to remove it from the array. The Chip can be focused but does not gain depth when clicked or touched since no onClick property is set.

import React from 'react';
import './style.css';
import ChipInput from 'material-ui-chip-input';

export default function App() {
  const defaultValue = ['black', 'white'];
  return (
    <>
      <h1>ChipInput Raect</h1>
      <ChipInput
        placeholder="Enter chips"
        className="input_chips"
        defaultValue={defaultValue}
      />
    </>
  );
}

output:

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories