State with React Component

TodoList.jsx

import { useState } from 'react';

const TodoList = () => {
  const [todo, setTodo] = useState('');
  const [todos, setTodos] = useState([]);

  const onClick = () => {
    setTodo('');
    setTodos([...todos, todo]);
  };

  return (
    <div>
      <input value={todo} onChange={(e) => setTodo(e.target.value)} />
      <button onClick={onClick}>Add Todo</button>
      {todos.map((todo) => (<div>{todo}</div>))}
    </div>
  );
};

export default TodoList;