Input of Skills

Introduction

In this challenge we will develop react tag input component which can add tags without any external library.
Only with just one component you can have an input box with the capability to input tags or keywords.
In input of tags component, there will be only one state which will carry all the user inputs with the help of onKeyUp JavaScript event.

Skills Graph

Input of Skills

To get started, open the editor. You can see the following files from your editor.

├── public
├── src
│   ├── components
│   │   └── TagInput.js
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   └── index.js
├── package-lock.json
└── package.json

Requirements

• To install the project dependencies, use the following command:

  npm i

• Please complete this challenge in the src/component/TagInput.js file.

• The handleAddTag function is called when a key is pressed in the input field. If the key is not the Enter key, the function returns early and does nothing. Otherwise, it checks the input value and adds it to the tags state if it is not empty and hasn't already been added. Then, it clears the input field.

• The onDeleteTag function is called when a tag is clicked. It filters the tags state to remove the clicked tag and updates the state with the filtered tags.

Example

Once you have completed the code, run it with the following command:

npm start

The finished result is as follows:

Summary

Congratulations! You have completed the Input of Skills. You can practice more challenge in LabEx to improve your skills.