How to Access and Render 'summary' Array from an Async Function in a Next.js Component

Question

Please, how can I get summaryfrom inside async fetchData to be exported to Layout? (knowing that summary is 5-elements array)

import { useRouter } from "next/router";
import Layout from '../../components/layoyt';
import Campaign from '../../components/campaign';

const Post = () => {
    const router = useRouter();
    const { address } = router.query;
    const campaign = Campaign(address);

    const fetchData = async () => {
        try {
            const summary = await campaign.methods.getSummary().call();
            // Handle the summary data here
            console.log(summary);
        } catch (error) {
            // Handle any errors that may occur during the API call
            console.error(error);
        }
    }
    fetchData();

    return (
        <Layout>
            <p>Post : {address}</p>
            {summary[0]}
        </Layout>
    )
}

export default Post;

score 2 · Accepted Answer · answered Apr 26 '23 at 17:22

You can use useState at the top of your component.

Add const [summary, setSummary] = useState([]) above useRouter hook. And don't forget to import it from react. And after that instead of console.log(summary) write setSummary(summary). And it should work :)

Here you can see code below:

import { useState, useEffect } from "react";

const Post = () => {
const [summary, setSummary] = useState([]);
...
useEffect(() => {
    const fetchData = async () => {
        try {
            const summary = await campaign.methods.getSummary().call();
            // Handle the summary data here
            setSummary(summary);
        } catch (error) {
            // Handle any errors that may occur during the API call
            console.error(error);
        }
    };
    fetchData();
}, []);

P.S Also it's better to wrap async code with useEffect.

How to Access and Render 'summary' Array from an Async Function in a Next.js Component

1 Answers1