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

please also share the component that you use the state in it — nima, Oct 14 '21 at 07:49
the problem is not with your state definition, you may use the searchQuery object in the JSX syntax which is cause the prolem. — nima, Oct 14 '21 at 07:50
@novonimo I have add full code at the end of my post. If JSX syntax is the case, so what the fixed? — Tan Nguyen, Oct 14 '21 at 07:52
your Search component is trying to render searchQuery which is an object. either pass in `searchQueryProp={searchQuery.Search1}` or redefine the logic in your Search component — bamtheboozle, Oct 14 '21 at 07:52
change `searchQueryProp={searchQuery}` to `searchQueryProp={searchQuery.Search1} ` — tsamridh86, Oct 14 '21 at 07:55

score 2 · Accepted Answer · answered Oct 14 '21 at 07:56

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.

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

1 Answers1

Why did you get this error?

The solution: