[React Study] Simple Todos

import { 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, ...currentArray]);
    setToDo('');

    console.log(toDos);
  };

  return (
    <div>
      <h1>Todo Count : {toDos.length}</h1>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="Input Value!!"
          onChange={onChange}
          value={toDo}
        />
        <button>Add</button>
      </form>
      <hr />
      <ul>
        {toDos.map((todoItem, index) => (
          <li key={index}>{todoItem}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;