javascript 56 lines · 8 steps

Building a tag input in React

A controlled React component that turns typed text into deduplicated tag chips with keyboard editing.

Explained by highlit

React Intermediate controlled-inputs state-management keyboard-handling refs immutability

1import { useState, useRef } from "react";
2 
3export function TagInput({ initialTags = [], onChange }) {
const [tags, setTags] = useState(initialTags);
const [draft, setDraft] = useState("");
const inputRef = useRef(null);
7 
const commit = (value) => {
  const tag = value.trim().toLowerCase();
  if (!tag || tags.includes(tag)) return;
  const next = [...tags, tag];
  setTags(next);
  onChange?.(next);
};
15 
const removeAt = (index) => {
  const next = tags.filter((_, i) => i !== index);
  setTags(next);
  onChange?.(next);
};
21 
const handleKeyDown = (e) => {
  if (e.key === "Enter" || e.key === ",") {
    e.preventDefault();
    commit(draft);
    setDraft("");
  } else if (e.key === "Backspace" && draft === "" && tags.length) {
    e.preventDefault();
    removeAt(tags.length - 1);
  }
};
32 
return (
  <div className="tag-input" onClick={() => inputRef.current?.focus()}>
    {tags.map((tag, i) => (
      <span key={tag} className="chip">
        {tag}
        <button type="button" aria-label={`Remove ${tag}`} onClick={() => removeAt(i)}>
          &times;
        </button>
      </span>
    ))}
    <input
      ref={inputRef}
      value={draft}
      placeholder={tags.length ? "" : "Add a tag"}
      onChange={(e) => setDraft(e.target.value)}
      onKeyDown={handleKeyDown}
      onBlur={() => {
        commit(draft);
        setDraft("");
      }}
    />
  </div>
);
56}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Keeping the committed tags and the in-progress draft as separate state cleanly divides finished data from work in progress.
2Building a fresh array with the spread operator lets you update state and notify a parent from the same immutable value.
3Mapping keyboard events like Enter, comma, and Backspace onto commit and remove actions makes an input feel like a native tag editor.

Related explainers

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

package logging
 
import (
	"context"

Deduplicating log attributes in Go's slog

decorator-pattern structured-logging immutability

Intermediate 8 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);