cannot read property 'map' of undefined react native

image errors

The error Cannot read property ‘map’ of undefined’ is thrown when the map function in the Product component is executed.

I’m following the react Native tutorial, and I keep running into an issue when passing the value from the state of one component into another component.
I’m following the react Native tutorial, and I keep running into an issue when passing the value from the state of one component into another component.

i used axios to get the data

ProductScreen

import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import MenuProduct from '../components/Product/MenuProduct';
import MainHeader from '../components/Header/MainHeader';
import {POPULAR, Top_Sell} from '../data';
import ProductItem from '../components/Product/ProductItem';
import instance from '../routes/instance';

const ProductScreen = () => {
  const [product, setProduct] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const data = await instance('/api/products', {
        method: 'GET',
      });
      setProduct(data);
    };
    fetchData();
  }, []);

  return (
    <View style={{flex: 1}}>
      <MainHeader />
      <MenuProduct list={Top_Sell} />
      <ProductItem list={product} />
    </View>
  );
};

export default ProductScreen;

ProductItem

import React from 'react';
import ProductCard from './ProductCard';

const ProductItem = ({product}) => {
  return (
    <>
      {product.map((item, index) => {
        return (
          <ProductCard
            id={item._id}
            image={item.image}
            title={item.title}
            price={item.price}
            item={item}
            key={index}
          />
        );
      })}
    </>
  );
};

export default ProductItem;

ProductCard

import React from 'react';
import {Image, ScrollView, Text, TouchableOpacity, View} from 'react-native';
import {colors, sizes, spacing} from '../../constants/theme';
import AddItem from '../../utils/AddItem';

const CardHeight = 220;
const ProductCard = ({props}) => {
  return (
    <ScrollView>
      return (
      <View
        style={{
          marginLeft: spacing.l,
          marginBottom: spacing.l,
          marginRight: spacing.l,
        }}>
        <View>
          <View
            style={{
              backgroundColor: colors.white,
              borderRadius: sizes.radius,
              shadowColor: colors.black,
              shadowRadius: 4,
              shadowOpacity: 0.1,
              shadowOffset: {width: 0, height: 2},
            }}>
            <TouchableOpacity
              style={{
                borderRadius: sizes.radius,
                overflow: 'hidden',
                flexDirection: 'row',
              }}>
              <Image
                style={{
                  borderRadius: sizes.radius,
                  width: 160,
                  height: CardHeight - 60,
                  resizeMode: 'cover',
                }}
                source={props.image}
              />

              <View style={{marginTop: spacing.l}}>
                <View style={{marginLeft: spacing.l, marginBottom: spacing.s}}>
                  <Text style={{fontSize: 16, color: '#FA4A0C'}}>
                    {props.title}
                  </Text>
                </View>
                <View style={{marginLeft: spacing.l}}>
                  <Text style={{fontSize: 14, color: '#8b8989'}}>
                    {props.price}
                  </Text>
                </View>
                <TouchableOpacity style={{marginLeft: 130}}>
                  <AddItem />
                </TouchableOpacity>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
      ); })
    </ScrollView>
  );
};

export default ProductCard;

I have tried several ways on stackoverflow but I can’t figure it out

>Solution :

It should be list in ProductItem component and use list.map because when you sending prop in ProductItem you are sending list

import React from 'react';
import ProductCard from './ProductCard';

const ProductItem = ({list}) => {
  return (
    <>
      {list.length > 0 && list.map((item, index) => {
        return (
          <ProductCard
            id={item._id}
            image={item.image}
            title={item.title}
            price={item.price}
            item={item}
            key={index}
          />
        );
      })}
    </>
  );
};

export default ProductItem;