import React, { useState } from "react";

function App() {
  const [input, setInput] = useState("");
  const [task, setTask] = useState([]);

  function handleChange(event) {
    const newTask = event.target.value;
    setInput(newTask);
  }

  const listTasks = [...task];
  function addTasks() {
    setTask((prevTask) => [...prevTask, input]);
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <input type="text" name="tasksName" onChange={handleChange} />
        <button onClick={addTasks}>
          <span>Add</span>
        </button>
      </div>
      <div>
        <ul>
          {listTasks.map((items) => (
            <li>{items}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;