Deviopath › React

Tag Input

Hard · Forms

Build a tag input.

Show the tags inside <div className="tags">. Each tag is a <span className="tag"> containing <span className="tag-text">react</span> and a remove button <button className="remove">x</button>. The tags start as ["react", "javascript"].

Below the tags render <input className="tag-input"> and <p className="count">2/5 tags</p>.

Keyboard rules (use onKeyDown and e.key):

- "Enter" adds the input text as a new tag (trimmed and lowercased) and clears the input. Empty text is ignored.

- Duplicates are not added. Instead show <p className="error">Tag already exists</p> and keep the input text. The error disappears when the input text changes or a tag is added.

- "Backspace" in an empty input removes the last tag. With text in the input, Backspace does not remove tags.

- There can be at most 5 tags: Enter does nothing when there are already 5.

Clicking a tag's "x" button removes that tag.

Next: Cart with Coupon Codes