Estaba trabajando en un formulario de entrada múltiple donde enviamos la consulta y se muestra la consulta enviada. Después del envío, todos los campos vuelven a estar en blanco. Si realizo otro envío para otro campo, la pantalla muestra el nuevo envío, pero también muestra el valor del envío anterior del campo anterior. No estoy seguro si me estoy explicando bien. Todavía me cuesta entender muchos conceptos dentro de reaccionar. Aquí está mi código de formulario:
export default function Form({searchQuery}) { const [query, setQuery] = useState({ firstName: "", lastName: "", }); const handleChange = (event) => { setQuery({ ...query, [event.target.name]: event.target.value }); }; const handleSubmit = (event) => { event.preventDefault(); searchQuery(query); setQuery({ firstName: "", lastName: "",}); }; return ( <div className="form-container"> <form onSubmit={handleSubmit}> <div> <input type="text" name="firstName" placeholder="Search by First Name" value={query.firstName} onChange={handleChange} /> </div> <div> <input type="text" name="lastName" placeholder= "Search by Last Name" value={query.lastName} onChange={handleChange} /> <div> <button>Search</button> </div> </form> </div> ); }Y aquí está el componente que muestra estas consultas:
function SubmittedData() { const [query, setQuery] = useState([ {firstName: "", lastName: "", }]); const searchQuery = (query1) => { setQuery([ { firstName: query1.firstName, lastName: query1.lastName, } ]); }; return ( <div className="App"> <FormMemberSearch searchQuery ={searchQuery} /> { query.map(query => { return ( <div> {query.firstName} {query.lastName} </div> ) }) } </div> ); } export default SubmittedData;Cuando envío "Ana" como primer nombre y dejo vacío el campo Apellido, solo aparece Ana. Si ingreso Celly como primer nombre, solo mostrará Celly, lo cual está bien. Pero después de ese envío, si ingreso algo como "Delvey" para el apellido y envío el formulario, el resultado será Celly Delvey. ¿Cómo hago para que muestre solo Delvey en lugar del valor de otro campo del envío anterior?
Gracias.