CODEWITHSUNDEEP
reactjsreact-native
Dinakaran Karunakaran
Dinakaran Karunakaran

Reputation: 23

Undefined error while trying to map over array of objects React Native

I've been trying to map an array of items which is passed from my Home Component to another but I'm always getting the error restaurants.map is Undefined. I fetch the data from Yelp and store it in a State(Home Component), then I pass this to another component, retrieve it through props and try to map through it(RestaurantItems Component). Please help. I have attached the code of my two components..

Home Component

import { View, Text, StatusBar, ScrollView } from "react-native";
import React, { useEffect, useState } from "react";
import HeaderTabs from "../components/HeaderTabs";
import SearchBar from "../components/SearchBar";
import Categories from "../components/Categories";
import RestaurantItems from "../components/RestaurantItems";

const YELP_API_KEY =
  "6NE-noDkyFUDKVVo2B8POXtwsAIBEe7QTnZEwMpvNE-5asFQ1q0_jh7iJ5KqprLD3sVt2htFrZbe4V2rHbdXgUcqkMSquQADGcGOTh_ANZ1DRT_tnFKZBHT4Hh0eYn";

export default function Home() {
  const [restaurantData, setRestaurantData] = useState();

  const getRestaurantFromYelp = async () => {
    const response = await fetch(
      `https://api.yelp.com/v3/businesses/search?term=restaurants&location=san+francisco`,
      {
        method: "GET",
        headers: {
          Authorization: `Bearer ${YELP_API_KEY}`,
        },
      }
    );

    const data = await response.json();
    setRestaurantData(data);
  };

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

  return (
    <View style={{ backgroundColor: "#eee", flex: 1 }}>
      <StatusBar barStyle="dark-content" backgroundColor="#eee" />
      <View style={{ backgroundColor: "#fff", padding: 15 }}>
        <HeaderTabs />
        <SearchBar />
      </View>
      <ScrollView showsVerticalScrollIndicator={false}>
        <Categories />
        <RestaurantItems restaurants={restaurantData} />
      </ScrollView>
    </View>
  );
}

RestaurantItems Component

import React from "react";

import { MaterialCommunityIcons } from "react-native-vector-icons";

export default function RestaurantItems({ restaurants }) {
  console.log(restaurants);

  return (
    <View>
      {restaurants.map((single_data) => (
        <Text>{single_data.name}</Text>
      ))}
    </View>
  );
}

Upvotes: 2

Views: 488

Answers (1)

dbuchet
dbuchet

Reputation: 1651

This has been asked so many times! Your state is not initialized, so at first render, when your datas are not loaded yet, you have an error. So initiliaze your state with an empty array

const [restaurantData, setRestaurantData] = useState([]);

Upvotes: 1

Related Questions