useState-hook

import ReactDOM from "react-dom";
import React, { useReducer, useState } from "react";

const App = () => {
  const [data, setData] = useState('');
  const [item, setItem] = useState([]);

  const HandleChange = (e) => {
    setData(e.target.value)
  };
  const removeItem = (index) => {
    const payload = item.filter(i => i.index !== index);
     setItem(payload);
  }
  const handleSubmit = (e) => {
    e.preventDefault();
    const payload = [
      ...item,
      {
        name : data,
        index : item.length
      }
    ]
    setItem(payload);
   
  };
  return (
    <div>
      <h1>TODO LIST</h1>
      <form onSubmit={handleSubmit}>
        <input value={data} onChange={HandleChange} />
        <button>Add</button>
        <ol>
          {item && item.map(({ name }, index) => {
            return (
              <li key={index}>
                {name}
                <button onClick={() => removeItem(index)}>Delete</button>
              </li>
            );
          })}
        </ol>
      </form>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));