A simple Chip Input

Chip.js

import React from 'react';
import './style.css';

export default function Chip({ chip, onDelete }) {
  return (
    <div class="chip-bg">
      <span class="chip-message">{chip.message}</span>
      <button class="chip-delete" onClick={() => onDelete(chip.id)}>
        X
      </button>
    </div>
  );
}

ChipInputApp.js

import React from 'react';
import { useState } from 'react';
import './style.css';
import Chip from './Chip';

export default function ChipInputApp() {
  const [inputValue, setInputValue] = useState('');
  const [chipList, setChipList] = useState([]);

  function deleteChip(id) {
    setChipList(chipList.filter((x) => x.id != id));
  }

  function addChip(message) {
    if (!message || !message.trim()) {
      return;
    }
    const newChip = {
      id: Date.now(),
      message: message,
    };
    setChipList([...chipList, newChip]);
  }

  return (
    <div class="main-container">
      <div class="input-row">
        <h2>Chips Input</h2>
        <input
          class="chip-input"
          placeholder="Type a chip name and press enter"
          onChange={(e) => setInputValue(e.target.value)}
          value={inputValue}
          onKeyDown={(key) => {
            if (key.code === 'Enter') {
              addChip(inputValue);
              setInputValue('');
            }
          }}
        />
      </div>
      <div class="chip-row">
        {chipList.map((chip) => (
          <Chip chip={chip} onDelete={deleteChip} />
        ))}
      </div>
    </div>
  );
}

styles.css

.chip-bg {
  background: gray;
  display: inline;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  border-radius: 0.25rem;
}

.chip-message {
  color: azure;
  margin-right: 0.5rem;
}

.chip-delete {
  color: red;
  border-radius: 0.25rem;
  border-style: none;
}

.main-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100vh;
  align-items: center;
}

.chip-row {
  display: flex;
  gap: 0.5rem;
  min-height: fit-content;
}

.input-row {
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chip-input {
  min-width: 15rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
}