seo Question posted in
Some basic information to get you started with this can be found here.

Seo – Uncaught TypeError: Cannot read properties of undefined (reading 'map'). I am getting this

I am working on my project to create a food ordering app, and fetched the swiggy’s Api in my code.
When I try to run my code, I get the above error.

here is my Body.js file

import { useState, useEffect } from "react";
import RestaurantCard from "./RestaurantCard";

const Body = () => {
  let [ListOfRestaurants, setListOfRestaurants] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    let data = await fetch(
      "https://www.swiggy.com/dapi/restaurants/list/v5?lat=31.3260152&lng=75.57618289999999&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING",
    );
    let json = await data.json();
    // console.log(json)
    setListOfRestaurants(
      json.data.cards[5].card.card.gridElements.infoWithStyle.restaurants.info,
    );
  };

  return (
    <div className="body-container">
      <div className="res-container">
        {ListOfRestaurants.map((restaurant) => {
          return <RestaurantCard resData={restaurant} />;
        })}
      </div>
    </div>
  );
};

export default Body;

and here is my RestaurantCard.js file

import { CDN_URL } from "./utils/constants";

const RestaurantCard = (props) => {
  const { resData } = props;
  // const {name,cuisines,costForTwo,avgRating,deliveryTime,cloudinaryImageId} = resData?.data.cards.card.card.gridElements.infoWithStyle;
  return (
    <div className="res-card">
      <div className="res-logo">
        <img
          src={CDN_URL + restaurants.info.cloudinaryImageId}
          alt="Restaurant main picture"
        ></img>
      </div>
      <h4>
        {
          resData.data.cards[5].card.card.gridElements.infoWithStyle.restaurants
            .info.name
        }
      </h4>
      <p>
        {resData.data.cards[5].card.card.gridElements.infoWithStyle.restaurants.info.cuisines.join(
          ", ",
        )}
      </p>
      <p>
        {
          resData.data.cards[5].card.card.gridElements.infoWithStyle.restaurants
            .info.costForTwo
        }
      </p>
      <p>
        {
          resData.data.cards[5].card.card.gridElements.infoWithStyle.restaurants
            .info.avgRating
        }{" "}
        ⭐
      </p>
      <p>
        {
          resData.data.cards[5].card.card.gridElements.infoWithStyle.restaurants
            .info.deliveryTime
        }{" "}
        Mins. ⏰
      </p>
    </div>
  );
};

export default RestaurantCard;

I want to display all the cards on my page. Can anyone fix this please?

Tags:

2

Answers


  1. 0

    I have made some changes to your code, pls try this way

    import { useState, useEffect, useCallback } from "react";
import RestaurantCard from "./RestaurantCard";

const Body = () => {
  let [ListOfRestaurants, setListOfRestaurants] = useState([]);

  useEffect(() => {
    fetchData().then(data => {
      setListOfRestaurants(data);
    });
  }, [setListOfRestaurants]);

  const fetchData = useCallback(async () => {
    let data = await fetch(
      "https://www.swiggy.com/dapi/restaurants/list/v5?lat=31.3260152&lng=75.57618289999999&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING",
    );
    let json = await data.json();
    return json.data.cards[5].card.card.gridElements.infoWithStyle.restaurants.info;
  }, []);

  return (
    <div className="body-container">
      <div className="res-container">
        {ListOfRestaurants.map((restaurant) => {
          return <RestaurantCard resData={restaurant} />;
        })}
      </div>
    </div>
  );
};

export default Body;
    Login or Signup to reply.
  2. 0

    can you show cdn_url i dont how to put image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search