NextJS: I am getting undefined from api json data

Question

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

Probably your data is an Array, so try a for and print the data — Juany
– Juany, Commented Nov 11, 2020 at 11:47
data.userId returns: Uncaught TypeError: Cannot read property 'UserId' of undefined — Kanika Jain
– Kanika Jain, Commented Nov 11, 2020 at 11:55

SHUVO MUSA · Accepted Answer · 2020-11-11 13:44:17Z

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;

Kanika Jain · Accepted Answer · 2020-11-11 12:39:53Z

1

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

answered Nov 11, 2020 at 12:39

Kanika Jain

412 silver badges3 bronze badges

Collectives™ on Stack Overflow

NextJS: I am getting undefined from api json data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related