React Tags Input: Simple Guide For Adding Tagging Feature

Need a tagging system for your React app?

The React tags input component makes it easy to add and manage tags in a text field. Users can enter keywords, remove tags, and even customize the input behavior. This feature is widely used in search filters, content categorization, and form inputs.

In this blog, we’ll break down how it works. You’ll learn about handling input values, managing text input, and adding extra features. With a simple example, you can build a flexible tagging system that fits your needs.

Let’s get started!

What is tag input?

The tag input feature is a user interface element that allows users to enter multiple items in a single input field by separating them into individual tags. Each new tag is created when the user types a value and press enter. This feature is especially useful in scenarios such as search filters, categorizing posts, or managing user interests. By leveraging react tags, developers can build interfaces that let users easily add, display, and remove tag entries, providing a highly interactive experience.

Setting Up a react project

Before you begin, it’s important to set up your react project correctly. This involves installing the necessary tools, such as a build tool (like Webpack or Create React App) and configuring your development environment. Start by creating a new project directory, then install dependencies using npm or yarn. Ensure that you have the latest version of import react in your project to leverage the latest features of React.

Installing Dependencies and css file

A react tags input component typically requires some external libraries and a dedicated css file for styling. Install the necessary package (e.g., via npm: npm install react-tagsinput --save). After installation, remember to import react in your component file and include the css file that comes with the package. This file will handle the default background color, border radius, and font size settings, giving you a starting point for further customization.

Basic Code Structure: import react and export default app

Let’s dive into a sample implementation. In your component file, you start by including the essential modules. Use statements such as:

1import React, { useState } from 'react';
2import TagsInput from 'react-tagsinput';
3import 'react-tagsinput/react-tagsinput.css';
4
5function App() {
6  const [tags, setTags] = useState([]);
7
8  const handleChange = (newArray) => {
9    setTags(newArray);
10  };
11
12  return (
13    <div>
14      <h1>React Tags Input Example</h1>
15      <TagsInput value={tags} onChange={handleChange} />
16    </div>
17  );
18}
19
20export default App;

​

In this example, import react is used at the top, and the file concludes with export default app to ensure the component is accessible throughout the react project.

Creating a simple tagging component

Building a simple tagging component from scratch can give you more control over its behavior. In this component, you will create an array const to store selected tags and handle events such as press enter to add a new tag or delete to remove tag. This method allows you to design the component to suit your application’s specific requirements, including the maximum number of tags a user can add.

Building a sample implementation with function called App

Below is a more detailed sample implementation where a function called App manages tag input. Notice how the code uses const newtags to update the list, and function handlers to monitor the input field:

1import React, { useState } from 'react';
2
3const CustomTagsInput = (props) => {
4  const [tags, setTags] = useState([]);
5  const [input, setInput] = useState("");
6
7  const handleKeyDown = (e) => {
8    if (e.key === 'Enter' && input.trim() !== "") {
9      // Create new array with the new tag
10      const newArray = [...tags, input.trim()];
11      setTags(newArray);
12      setInput("");
13    } else if (e.key === 'Backspace' && !input && tags.length) {
14      // Remove last tag
15      setTags(tags.slice(0, tags.length - 1));
16    }
17  };
18
19  return (
20    <div className="tags-input-container" style={{ display: 'inline-flex', alignItems: 'center' }}>
21      {tags.map((tag, index) => (
22        <span key={index} style={{ display: 'inline-block', backgroundColor: '#e0e0e0', borderRadius: '4px', marginLeft: '4px', fontSize: '14px', fontWeight: 'bold' }}>
23          {tag}
24          <button onClick={() => setTags(tags.filter((_, idx) => idx !== index))} style={{ marginLeft: '4px' }}>delete</button>
25        </span>
26      ))}
27      <input
28        type="text"
29        value={input}
30        placeholder="Add a tag"
31        onChange={(e) => setInput(e.target.value)}
32        onKeyDown={handleKeyDown}
33        style={{ marginLeft: '8px', fontSize: '14px' }}
34      />
35    </div>
36  );
37};
38
39export default CustomTagsInput;

​

In this component, input value is tracked via const newtags and updated on each keystroke. This sample implementation uses inline block and inline flex styling to properly align items in the input field.

Understanding input field and tag suggestions

A robust react tags input system often includes tag suggestions to help the user by offering a suggestions list as they type. These tag suggestions can be fetched from an external API or pre-defined data. For example, you might use a custom filter function to narrow down a list of suggestions countries. You can even define a variable like const suggestions countries map to map over an array of country names and render them as suggestions.

Advanced Features: new tag creation and remove tag functionality

Beyond the basic addition of tags, advanced features include the ability to terminate tags input after a certain limit and remove tag when needed. For instance, the component may restrict input after reaching a maximum number of tags. Additional functionalities, like the ability to delete a tag on a specific character codes input (e.g., pressing the backspace key), ensure that the react tags component remains intuitive and user-friendly.

Visualizing the Component Structure

Below is a visual representation that outlines the flow of data in a react tags input system. This diagram highlights key aspects such as state management, event handling, and the dynamic creation and removal of tags:

This flow shows how a new tag is created when the user types in the input field, and how selected tags are managed via array operations, ensuring efficient re-rendering in the react dom.

Debugging and Code Optimization: note on margin left, align items, and delete functionality

During development, debugging is an essential step. If you notice layout issues such as improper margin left or misaligned tags, inspect your css file to verify inline flex and align items properties. Additionally, optimize the delete functionality in your component by ensuring that the remove tag function correctly updates the state using array const operations. These adjustments help maintain a clean and efficient codebase.

The Bottom Line!

In this comprehensive guide on react tags input, we have explored every aspect—from setting up a react project and import react in your files to building a simple tagging component that handles input value, text input, and remove tag functionalities effectively. We covered how to manage state with array const and new array, implement a custom filter to restrict a maximum number of tags, and style your component using css file techniques like inline block, inline flex, and align items.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.