React.js Error: " Objects are not valid as a React child (found: object with keys {})."

3
votes

I make a react.js app using the API "https://www.definitions.net/definitions_api.php". When I log data.result, it outputs the right array of results, but when I map through the state, I get this error: "Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead." 

//states
  const [definition, setDefinition] = useState([])
  const [search, setSearch] = useState('')
  const [query, setQuery] = useState('')

  useEffect(() => {
    getDef()
   }, [query])


//FETCH
  const getDef = async () => {
  const response = await fetch(`....`)
  const data = await response.json()
  setDefinition(data.result);

//handle input
  const updateSearch = e => {
    setSearch(e.target.value)

  }

//get the final query onSubmit
const getQuery = e =>{
  e.preventDefault()
  setQuery(search)
  setSearch('')
}


 return (

  { definition && definition.map(item => (
       <Definition term={item.term} 
                  partofspeech = {item.partofspeech}
                  definition={item.definition} 
                  example = {item.example}                 
             />

            )
         )
        }

  );

in Definitions component I destructure the props:

function Definition({term, partofspeech, definition, example}) {
    return (
        <div className="definition">
            <h4>{term} ({partofspeech})</h4>
              <p>{definition}</p>
               <p>{example}</p>

        </div>
    )
}

Any help is welcome, thanks.

2
reactjsrestreact-hooksfetch-api
What is this ` <h4>{term} ({partofspeech})</h4>` ? partOfSpeech is it work ? - Kaslie
in one of the variable, you are trying to render an object. That is what React is telling you. Can you post the value of ` data.result`? - Kevin Amiranoff
@KevinAmiranoff data.result logs: (33) 0: {term: "cat, true cat", definition: "feline mammal usually having thick soft fur and no ability to roar: domestic cats; wildcats", example: {…}, partofspeech: "noun"} 1: {term: "guy, cat, hombre, bozo", definition: "an informal term for a youth or man", example: ""a nice guy"; "the guy's only doing it for some doll"", partofspeech: "noun"} - maxianna
data log: {result: Array(33)} result: Array(33) 0: {term: "cat, true cat", definition: "feline mammal usually having thick soft fur and no ability to roar: domestic cats; wildcats", example: {…}, partofspeech: "noun"} 1: {term: "guy, cat, hombre, bozo", definition: "an informal term for a youth or man", example: ""a nice guy"; "the guy's only doing it for some doll"", partofspeech: "noun"} - maxianna
example: {…}, that could be the issue I think - Kevin Amiranoff

2 Answers

3
votes

Try this, when you loop the component loop the definition without the root element, it will cause error

const Component = () => {
  ....
  return (
    <Fragment>
      { definition && definition.map(item => (
       <Definition term={item.term} 
                  partofspeech = {item.partofspeech}
                  definition={item.definition} 
                  example = {item.example}                 
             />

            )
         )
        }

  )
    </Fragment>
  )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
0
votes

in return you have both ({}) round and curly, you can remove both and you should return directly

return definition && definition.map(item => (
       <Definition term={item.term} 
            partofspeech = {item.partofspeech}
            definition={item.definition} 
            example = {item.example}                 
        />
    ));

Short snippet, you can run it and review :

const { useState } = React;

const App = () => {

  const [users,setUsers] = useState(['Vivek' , 'Darshita', 'Darshvi' , 'Coming..']);

  return users.map(user => <p>{user}</p>);
}

ReactDOM.render(<App />, document.getElementById('react-root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>