React.js Error: “ Objects are not valid as a React child .."

1

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

I know this is an old topic, but for people like me struggling to find an answer, I’d like to share my solution.

I came across this question when I was trying to map some strings in an array using React.

So, I wanted to code a basic chat window in react. There is an input area, you write in it, click send, the input shows in the screen.

I declared 2 useState, one empty LIST to add the strings in and one empty STRING for getting the user input.

Getting the input was easy, BUT pushing it in the list and mapping it in a component was somehow making my array an object and giving this error.

I solved the problem with converting my empty STRING hook to an empty OBJECT with according string values.

There are two codesandboxes to show it working.

Objects can’t be children error SANDBOX

Solved version(Pay attention to hooks)

1 Like
3

currentMessage in the OnClickPushToList function is an event object, not the state variable (you named them the same).

Just remove the parameter if you do not need it, or rename it.

// parameter renamed and logged out
  function OnClickPushToList(currentMessageEvent) {
    console.log('State', currentMessage);
    console.log('Event object', currentMessageEvent);
    
    setChatList([...chatList, currentMessage]);
  }
1 Like
4

Hmm. Looks like I need to learn more about the event objects. Thank you for the clarification!

5

It works like in normal JS. The handler callback function is passed the event object as an argument (automatically). So the first parameter (if it has one) in the handler function definition is the event object.

https://developer.mozilla.org/en-US/docs/Web/API/Event
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback

1 Like