Codifico useState como esta publicación
const [searchQuery, setSearchQuery] = React.useState({ Search1: "", Search2: "", });y tira
Los objetos no son válidos como hijos de React (encontrado: objeto con claves {Search1, Search2}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
código completo
import * as React from 'react' const Search = ({ handlerProp, searchQueryProp, inputName }) => { return ( <div className="App"> <input type="text" name={inputName} onChange={handlerProp} value={searchQueryProp} /> </div> ); } function App() { const [searchQuery, setSearchQuery] = React.useState({ Search1: "", Search2: "", }); function handleEmit({ target: { name, value } }) { setSearchQuery((prevState) => ({...prevState, [name]: value})); } return ( <div className="App"> <Search handlerProp={handleEmit} searchQueryProp={searchQuery} inputName="Search1" /> <Search handlerProp={handleEmit} searchQueryProp={searchQuery} inputName="Search2" /> </div> ); }Como mencioné en los comentarios antes de agregar los códigos relacionados, el problema está en su objeto searchQuery .
pasó un objeto en lugar de una cadena al componente de Search . El elemento de input , obtiene una propiedad de value que es una string .
Entonces, cambie la sección de retorno de su App para pasar una string válida para searchQueryProp :
return ( <div className="App"> <Search handlerProp={handleEmit} searchQueryProp={searchQuery.search1} inputName="Search1" /> <Search handlerProp={handleEmit} searchQueryProp={searchQuery.search2} inputName="Search2" /> </div> ); Nota: siempre use los caracteres en minúsculas para definir sus variables y constantes y solo use los caracteres en mayúsculas en el nombre de los componentes. definió el valor de su estado con Search1 y Search2 que no es correcto.