Todo-list

import { useEffect, useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value); 
  const onSubmit = (event) => {
    event.preventDefault();
    if(toDo === ""){
      return;
    }
    setToDos(currentArray => [toDo, ...toDos]) //function(currentArray)와 같은 것
    setToDo("");
  };
  console.log(toDos);
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input 
          onChange={onChange} 
          value={toDo} type="text" 
          placeholder="Write your to do...">
        </input>
        <button>Add To Do</button>
        </form> 
        <hr />
        {toDos.map((toDo,index)=> <li key={index}>{toDo}</li>)} 
    </div>
  );
}
export default App;