cannot read property 'map' of undefined react native - reactjs

Question

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

Answer 1

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;

Answer 2

Check the below syntax for passing data from parent to child component.
<Child parentToChild={data}/>
Here, we are passing the data in the child component as data.
data is the data we have to pass, and parentToChild is the prop's name.
Next, it's time to capture the data in the child component. And it's very simple.
Here, there can be two cases.
Case 1: If you are using a functional component, simply catch the parentToChild in the parameters.
import React from 'react'
export default function Child({parentToChild}) {
return (
<div>
{parentToChild}
</div>
)
}
Case 2: If you have a class component, then just use this.props.parentToChild.
import React, { Component } from 'react'
export default class Child extends Component {
render() {
return (
<div>
{this.props.parentToChild}
</div>
)
}
}