React useState hook - Objects are not valid as a React child

Question

I code useState like this post

 const [searchQuery, setSearchQuery] = React.useState({ Search1: "", Search2: "", });

And it throws

Objects are not valid as a React child (found: object with keys {Search1, Search2}). If you meant to render a collection of children, use an array instead.

Full code

 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> ); }

Answer 1

As I mentioned in the comments before adding the related codes, the problem is with your searchQuery object.

Why did you get this error?

you passed an object instead of a string to the Search component. The input element, get a value property which is a string .

The solution:

So, change your App return section to pass a valid string for the searchQueryProp :

return (
    <div className="App">
      <Search handlerProp={handleEmit} searchQueryProp={searchQuery.search1} inputName="Search1" />
      <Search handlerProp={handleEmit} searchQueryProp={searchQuery.search2} inputName="Search2" />
    </div>
);

Note: always use the lowercase characters to define your variables and constant and only use the uppercase characters in the components name. you defined your state's value with Search1 and Search2 which is not correct.