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>
);
}As I mentioned in the comments before adding the related codes, the problem is with your searchQuery object.
you passed an object instead of a string to the Search component.
The input element, get a value property which is a string.
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.