How to pass promise as props in Next.js

A lot of times we ran into situations where we need to fetch some data from an API and render it inside a React Component.

However fetch is an asynchronous operation which returns a promise, and React components are not able to render a promise.

In this tutorial, we are going to explain how to solve this limitation and pass promise value to a React component in Next.js

Pass promise as props example

In this example, we try to fetch data from typicode API inside the React component

Our page export the default component which contains an asynchronous call

pages/test.js

export default function Test() {
	return <Data />;
}

const Data = async () => {
	const data = await fetch(
		'https://jsonplaceholder.typicode.com/todos/10'
	).then((data) => data.json());

	return <div>Title: {data.title}</div>;
};

When we hit http://localhost:3000/test we encounter Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

![react error when rendering a promise inside React component][1]

How to solve Objects are not valid as a React child (found: [object Promise])

Now, To solve Objects are not valid as a React child, we need to:

• use React hook UseEffect to call the fetch API prior to React component rendering
• Display a teaser or a loading message while waiting for data to come

Let's take a look at our modified page now (you can go ahead and copy this code inside pages folder, it will works fine)

pages/test.js

import {useEffect, useState} from 'react';

export default function Test() {
	const [data, setData] = useState('');

	useEffect(() => {
		const callData = async () => {
			const data = await fetch(
				'https://jsonplaceholder.typicode.com/todos/10'
			).then((data) => data.json());
			setData(data);
		};

		callData();
	}, []);

	return data === '' ? <>loading ... </> : <div>{data.title}</div>;
}

The steps to take to render a promise value into the component are:

• Build an asynchronous function which takes care of fetching
• place it inside the useEffect which will run first
• call the built function inside the useEffect
• display a teaser or a loading message while waiting for data to fetch
• use UseState hook to render again the component once data is available

Conclusion

We have seen how to pass promise value as props for a React component using Next.js which is very helpful in situations where we are getting data from an external sources using API.

I strongly recommend that you understand promises, so you will get a thorough understanding of using fetch call, you can check my article about them in [this link][2]

Also if you would like to show some spinning figure while waiting for data, you can use tawilindcss loading spinner in this link, or nprogress library , here is my link on how to use it