reactjs - How do i create a conditional loading message in react

Question

I have a react code here i want to load data from an API but it's taking time to get the data, thus my function is failing How do i set it that it should wait for the data before rendering

import Head from 'next/head'
import Link from 'next/link'
import Navbar from './Navbar'
import Template from './Template'
import { useState, useEffect } from 'react'

export async function getStaticProps() {
    const response = await fetch('https://peegin.com/api/public/peegins/recent')
    const data = await response.json()

    return {
        props: { data }
    }
}

const Home = ({ data }) => {



    return (
        <div className="content">
            <Head>
                <title>Peegin Recent</title>
            </Head>
            <Navbar />
            {title}
            {data.map(peegin => (
                <div className="preview" key={peegin.permalink}>
                    <h3 className="title">
                        {peegin.title}
                    </h3>
                    <p>{peegin.meaning}</p>
                    <p className="example">Example</p>
                    <p className="example-content">{peegin.example}</p>
                    <p className="origin">Origin: {peegin.origin}</p>
                    <div className="name">
                        <h4>By</h4> &nbsp; <h4 className="namegreen">{peegin.user.name}</h4> &nbsp; <h4>{peegin.created_at}</h4>
                    </div>
                    <p className="views">{peegin.views.view} Views</p>
                </div>
            ))}
        </div>
    );
}

export default Home;

score 0 · Accepted Answer

const Home = ({ data }) => {

    // add this as fallback
    if(!data){
      return <h1>Loading..<h1/>
    }

    return (
        <div className="content">
            <Head>
                <title>Peegin Recent</title>
            </Head>
            <Navbar />
            {title}
            // add this to check for data first then do map
            {data && data.map(peegin => (
                <div className="preview" key={peegin.permalink}>
                    <h3 className="title">
                        {peegin.title}
                    </h3>
                    <p>{peegin.meaning}</p>
                    <p className="example">Example</p>
                    <p className="example-content">{peegin.example}</p>
                    <p className="origin">Origin: {peegin.origin}</p>
                    <div className="name">
                        <h4>By</h4> &nbsp; <h4 className="namegreen">{peegin.user.name}</h4> &nbsp; <h4>{peegin.created_at}</h4>
                    </div>
                    <p className="views">{peegin.views.view} Views</p>
                </div>
            ))}
        </div>
    );
}

reactjs - How do i create a conditional loading message in react

1 回答 1

Related

Reference