import { useState, useEffect } from "react"; import { ListItem } from "./ListItem"; export const TodoInput = props => { const [description, setDescription] = useState(""); const [todos, setTodos] = useState([]); const handleChange = event => { setDescription(event.target.value); }; const updateTodos = async () => { const response = await fetch("http://localhost:5000/todos"); const jsonData = await response.json(); setTodos(jsonData); }; useEffect(() => { updateTodos(); }, [description]); const handleSubmit = e => { e.preventDefault(); e.stopPropagation(); const body = { description }; fetch("http://localhost:5000/todos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), }); setDescription(""); }; return ( <> <div className="list-input"> <form onSubmit={handleSubmit}> <input value={description} onChange={handleChange} /> <button type="submit">Add todo</button> </form> </div> <div className="todo-list"> <ul> {todos.map(e => ( <ListItem todoItem={e} key={e.id} /> ))} </ul> </div> </> ); };

Tengo este componente de reacción que es básicamente un formulario que llama a una API cuando se envía. Tanto la tecla Intro como el botón Enviar funcionan bien, pero solo si usa ese método únicamente. Por ejemplo: si ingreso un elemento presionando el botón Enviar, aparece instantáneamente en la lista y si lo vuelvo a hacer, sucede lo mismo. Pero si luego escribo algo y presiono enter, el cuadro de texto se borra y el elemento se envía a través de la API a la base de datos, pero no aparecerá en la lista hasta que vuelva a escribir un carácter en el campo de entrada. ¿Tiene esto algo que ver con useEffect() que no se llama o es algo más?