CODEWITHSUNDEEP
javascriptreactjsnext.js
Kanika Jain
Kanika Jain

Reputation: 41

NextJS: I am getting undefined from api json data

I am getting undefined in console log instead of data

My Index.js (pages file)

import Head from "next/head";
import Link from "next/link";
import axios from "axios";
import Test from "../components/Test";

import styles from "../styles/Home.module.css";

function Home() {
    return (
        <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <Test />
        </div>
    );
}

export default Home;

My Test.js (components file) from which i get error

import React from "react";
import axios from "axios";

function Test({ data }) {
    console.log(data);
    return <div>Check console log log</div>;
}

export async function getStaticProps() {
    const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/todos/1`
    );
    return {
        props: {
            data,
        },
    };
}

export default Test;

Console Output

undefined

Please help me i dont know why axios, fetch doesnt work components but working in pages/index.js

Upvotes: 1

Views: 3319

Answers (2)

SHUVO MUSA
SHUVO MUSA

Reputation: 554

According to Next.js docs getStaticProps method works on Page Components but not in child components. You called in Test which is child component.

What You can do fetch data in your page component than pass the data via props & then you can access the data from child component If you are trying to use getStaticProps.

Example:

Index.js

import Head from "next/head";
import Link from "next/link";
import axios from "axios";
import Test from "../components/Test";

import styles from "../styles/Home.module.css";

function Home({ data }) {
    return (
        <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <Test data={data} />
        </div>
    );
}

export async function getStaticProps() {
   const { data } = await axios.get(
    `https://jsonplaceholder.typicode.com/todos/1`
   );
   return {
      props: {
        data,
     },
  };
}

export default Home;

Test Component:

import React from "react";

function Test({ data }) {
    console.log(data);
    return <div>Check console log log</div>;
}
export default Test;

Without getStaticProps & data directly in child component:

Index.js:(Page)

import Head from "next/head";
import Link from "next/link";
import Test from "../components/Test";
import styles from "../styles/Home.module.css";

function Home() {
    return (
        <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <Test />
        </div>
    );
}
export default Home;

Test.js(Component):

import React from "react";
import useSWR from "swr";
import fetch from "isomorphic-unfetch";


const fetcher = (url) => fetch(url).then((r) => r.json());

function Test() {
    const { data } = useSWR('yourURL', fetcher);

    if (error) return <div>failed to load</div>
    if (!data) return <div>loading...</div>
    return <div>hello {data.name}!</div>
}
export default Test;

Upvotes: 2

Kanika Jain
Kanika Jain

Reputation: 41

Solved! data passed from pages/index.js to components/Test.js

I found that "getStaticProps" doent supported in components only in pages dont know why it doesnt supported

Upvotes: 1

Related Questions