How To Add Tags In ReactJS Application

Introduction

In this article, we are going to learn how to create a tag with the help of a material UI package(chip input) in the ReactJS Application.

Prerequisites

• Basic knowledge of React
• Visual Studio Code must be installed
• Node JS must be installed

Create ReactJS project

Step 1

npx create-react-app chipInput

The very first step is to create a new React.js project using the following command.

Step 2

Open the newly-created project in Visual Studio code and install the following packages that are needed by using the following command,

npm i --save material-ui-chip-input@next

Step 3

Next, open app.js then replace complete code with the following code,

import React from 'react'
import './App.css';
import ChipInputExample from './chipInputExample';

function App() {
  return (
    <ChipInputExample></ChipInputExample>
  )
}

export default App;

Step 4

Create a JSX file with the name chipInputExample.jsx and add the following code in that file,

import React, { Component, Fragment } from 'react';
import ChipInput from 'material-ui-chip-input';

class ChipInputExample extends Component {
    constructor() {
        super();
        this.state = {
            sessionData: {
                language: [],
                skills: []
            }
        }
        this.addChip = this.addChip.bind(this);
        this.removeChip = this.removeChip.bind(this);
    }
    componentDidMount = () => {
    }

    addChip = (value, name) => {
        const { sessionData } = this.state;
        sessionData[name].push(value.charAt(0).toUpperCase() + value.slice(1));
        this.setState({ sessionData });
    };
    removeChip = (chip, index, name) => {
        const { sessionData } = this.state;
        sessionData[name].splice(index, 1);
        this.setState({ sessionData });
    };

    render() {
        const { sessionData } = this.state;
        return (
            <Fragment>
                <h3 align="center">Demo of material ui chip input</h3>
                <div className="row">
                    <div className="col-lg-6  col-md-6 col-sm-12">
                        <div style={{ margin: '1rem' }}>
                            <label htmlFor="uname1">Languages Used</label>
                            <div className="commonInputField">
                                <ChipInput
                                    value={sessionData.language}
                                    onAdd={value => this.addChip(value, "language")}
                                    onDelete={(chip, index) => this.removeChip(chip, index, "language")}
                                    variant="outlined"
                                    newChipKeyCodes={[9, 13, 187, 188]}
                                />
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6  col-md-6 col-sm-12">
                        <div style={{ margin: '1rem' }}>
                            <label htmlFor="uname1">Used Skills</label>
                            <div className="commonInputField">
                                <ChipInput
                                    value={sessionData.skills}
                                    onAdd={value => this.addChip(value, "skills")}
                                    onDelete={(chip, index) => this.removeChip(chip, index, "skills")}
                                    variant="outlined"
                                    newChipKeyCodes={[9, 13, 187, 188]}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </Fragment>
        )
    }
}

export default (ChipInputExample)

Output

Now it's time for the output,

Conclusion

In this article, I have tried to explain how to use chip input Material UI to write tags in reactjs application.

For any questions about this article regarding code or anything else, please leave a comment.