Question

0

87

Views

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

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

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-11T10:56:56.327Z

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.