Skip to main content

Delicious Reverie

blog of developer & bookworm benjamin read

React: data fetching results in type error: object is not a function

Sometimes I get frustrated with React, there can still sometimes be obscure errors that are a result of it's component lifecycle methods. But at least it means I can tell you about how to avoid them ...

Take a look at this code a second. There's nothing wrong with the fetch() resolution, the API works fine. There's nothing wrong with the render method either.

But if you try to run this code you'll get some error like Error: Objects are not valid as a React child (found: [object Promise]).

async function getFacts() { const response = await fetch("https://cat-fact.herokuapp.com/facts/random?amount=10") if (!response.ok) { throw new Error(‘error’) } const facts = await response.json() return facts } export default async function Home() { const facts = await getFacts(); return ( <div> {facts && facts.map(fact => ( <div key={fact.id}>test</div> ))} </div> ) }

The problem is that the data you fetched isn't consumed by the components' lifecycle. Yet there's nothing to tell you that in the error. Here's what you need to do to resolve it:

import { useEffect, useState } from 'react' async function getFacts() { const response = await fetch("https://cat-fact.herokuapp.com/facts/random?amount=10") if (!response.ok) { throw new Error(‘error’) } const facts = await response.json() return facts } export default async function Home() { const [facts, setFacts] = useState() useEffect(() => { getFacts().then(facts => setFacts(facts)) }, []) return ( <div> {facts && facts.map(fact => ( <div key={fact.id}>test</div> ))} </div> ) }

You see that we imported the useEffect and useState hooks, then when the component mounts, we fetch the data, and pass it to state using setFacts.

Now, once the data has been retrieved, you won't get that error any more.

It's a simple fix for an issue that wouldn't have occurred except for the fact that we're in React, and we need to respect the React component lifecycle, and it's way of handling data. We can't fetch data and assume we can just use it.

When in Rome ...


You're currently on the javascript disabled version of the site. To enable the site search and some pretty animations, view the javascript enabled react app.

About This Site

Delicious Reverie is the blog of developer & bookworm benjamin read. Set in Skybird and your system font. Built with Gatsby, hosted by Netlify. © Some rights are reserved. This site doesn't use any cookies or other session storage and has no tracking scripts.

Where you can find me: