I am new to react.js .
I made a simple to-do app to learn CRUD using react.js:

[![To-do app](https://i.stack.imgur.com/yprWs.png)](https://i.stack.imgur.com/yprWs.png)

A task is added when I click the '+' button. But I need to add a task when I click the 'ENTER' Key.
What should I do?

Here's A Part Of My Code :

JSX :

```
function Body() {
    const [toDos,setToDos] = useState([])
  const [toDo,setToDo] = useState('')
  const deleteTodo = idToDelete => setToDos(currentTodos => currentTodos.filter(toDo => toDo.id !== idToDelete))
    return (
        <div className="bodyoftodo"> 
          <div className="input">
        <form onSubmit={toDo} >
        <input value={toDo} onChange={(e)=>setToDo(e.target.value)} type="text" placeholder="️ Add item..." />
        <i onClick={()=>setToDos([...toDos,{id:Date.now() ,text: toDo, status: false}])} className="fas fa-plus"></i>
        </form>
      </div>
      <div className="todos">
        {toDos.map((obj)=>{
          return(
            <div className="todo">
              <div className="left">
                <input onChange={(e)=>{
                  console.log(e.target.checked);
                  console.log(obj);
                  setToDos(toDos.filter(obj2=>{
                    if(obj2.id===obj.id){
                      obj2.status=e.target.checked
                    }

```