Objects are not valid as a React child with state while rendering error

Issue

In Ionic with React I am getting 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."

The function getTimes should be returning a JSON object with key and value eg. {tmp1: '1:05', tmp2: '2:05'} but I am getting an error when trying to render, eventhough in console.log i can see the result.

export const getTimes = (date: Date) => {
 const API_URL = '...'
    return axios({
      url: API_URL,
      method: 'get'
    }).then(response => {     
      return response.data.data.timings;
    })
}

whereas in the tsx file where I do the rendering

const theTimes = () =>{
const [state, setState] = useState({ isLoading: true, collection: null });

useIonViewWillEnter(()=>{
    getTimes(new Date()).then(res=>{
        setState({ isLoading: false, collection: res });
    })
})

    console.log(state.collection);


return <IonCard>{state.collection}</IonCard>
}

Solution

As the error says, state.collection is an object ({tmp1: '1:05', tmp2: '2:05'}). React doesn't know how to handle this, or what to do, so it's throwing an error.

It depends on what you're trying to render, but you likely want to render each of the individual object properties.

For example:

  return <IonCard>{state.collection.tmp1} {state.collection.tmp2}</IonCard>

Answered By - skovy