lable-state

function App() {
  const [value, setValue] = React.useState("");
  const [data, setData] = React.useState([]);

  const handlerChange = ({ target: { value } }) => {
    setValue(value);
  };

  const handlerKeyPress = event => {
    if (event.key === "Enter") {
      setData([...data, value]);
      setValue("");
    }

    if (!value && event.key === "Backspace") {
      setData([...data.slice(0, data.length - 1)]);
    }
  };

  const handlerRemove = index => () => {
    setData([...data.slice(0, index), ...data.slice(index + 1)]);
  };

  return (
    <div className="App">
      <input
        type="text"
        value={value}
        onChange={handlerChange}
        onKeyUp={handlerKeyPress}
      />

      {data.map((item, index) => (
        <p key={`${index}-${item}`}>
          {item}
          <button onClick={handlerRemove(index)}>X</button>
        </p>
      ))}
    </div>
  );
}