Undefined Reference Error when trying to pull data from api in nextjs

Question

I'm trying to use a fake api found at https://fakestoreapi.com/ to get data into my Next js app. But I keep getting an undefined reference error, even though I got the code snippet from the official next js docs. This is my code

import { Box, Heading } from "@chakra-ui/react";

export async function getStaticProps() {
  const response = await fetch("https://fakestoreapi.com/products");
  const data = await response.json();

  return {
    props: {
      products,
    },
  };
}

function ProductList() {
  return (
    <Box>
      {products.map((product) => (
        <Box>
          <Text> {product.title} </Text>
        </Box>
      ))}
    </Box>
  );
}

export default ProductList;

And this is the error I keep getting

ReferenceError: products is not defined

"even though I got the code snippet from the official next js docs" - but not for that exact kind of data structure, right ...? — C3roe
– C3roe, Commented Jun 20, 2022 at 10:33

Syed Saad Ullah Shah · Accepted Answer · 2022-06-20 10:38:17Z

1

try this:

function ProductList({products}) {
  return (
    <Box>
      {products.map((product) => (
        <Box>
          <Text> {product.title} </Text>
        </Box>
      ))}
    </Box>
  );
}

answered Jun 20, 2022 at 10:38

Syed Saad Ullah Shah

711 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Stephen Murya Over a year ago

I did. Now I get this error TypeError: Cannot read properties of undefined (reading 'map')

Syed Saad Ullah Shah Over a year ago

rename the data variable to products

Stephen Murya Over a year ago

I still get the same error

Syed Saad Ullah Shah Over a year ago

Can you console.log(data) and see what is output, also console response

Stephen Murya Over a year ago

I commented out the product.map part and console.log the data. It didn't return anything

|

Collectives™ on Stack Overflow

Undefined Reference Error when trying to pull data from api in nextjs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related