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

CodePudding user response：

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;

CodePudding user response：

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>
        )
    }
}