创建一个待办清单的REACT组件

import React from 'react'
import {useState} from 'react';

const ToDoList = () => {
    const [toDo,setToDo] = useState([]);

    const [inputValue,setInputValue] = useState('');

    const handleChange = (e) => { 
        setInputValue(e.target.value);
    }

     const handleSubmit = (e) => {
        e.preventDefault();

        if(inputValue === '') return;

        setToDo([...toDo,inputValue]);

        setInputValue('');
     }

  return (
    <div>
        <h1>TodoList</h1>

        <form onSubmit={handleSubmit}>

            <input type="text" value={inputValue} onChange={handleChange} placeholder="Add a new todo" />
            <button type='submit'>Add Todo</button>
        </form>

        <ul className="list-group">
        {toDo.map((todo,index) => (
            <li key={index}>
                {todo}
            </li>
        ))}
        </ul>
       
      
    </div>
  )
}

export default ToDoList