Tag Input
Build a tag input where typing a value and clicking Add appends it as a removable chip, ignoring empty and duplicate entries.
Create a tag input control. The UI has a text input (placeholder "Add tag") and an "Add" button. When the user types a value and clicks Add, the trimmed value is appended to a list of tags rendered as chips (list items), and the input is cleared.
Each tag chip shows the tag text and a remove button labeled "Remove {tag}" (via aria-label) that deletes only that tag when clicked.
Adding must ignore empty or whitespace-only input (nothing is added, but it's fine for the input to clear). Duplicate tags (exact match against an existing tag) are ignored — the list does not grow and no second chip appears.
The starter renders the input, the Add button, and an empty list, but none of the add/remove/dedupe behavior. Implement the full behavior so all tests pass.
Requirements
- A text input with placeholder "Add tag" and an "Add" button are rendered.
- Clicking Add with a non-empty value appends the trimmed value as a list item (chip) and clears the input.
- Each chip has a remove button with aria-label "Remove {tag}" that removes only that tag.
- Empty or whitespace-only input adds no tag.
- Duplicate tags (exact match) are ignored — no second chip is added.
- Tags render inside a list (role="list" / listitem).
Hints (4)
- Keep tags in a useState array; on Add, trim the input and bail early if it is empty or already present.
- Render each tag as a <li> containing the text and a <button aria-label={
Remove ${tag}}>. - Always clear the input after an Add attempt by setting the input state back to an empty string.
- Remove a tag by filtering the array to exclude the matching value.
Topics
- React
- DOM Manipulation
Asked at
Atlassian · Urban Company · Zomato · BookMyShow · PhonePe · BrowserStack
