how to pass data between components using props in react native

Question

I'm new in react-native and I want to pass data from the Home component to the Product component and I import the Product component in the Home component and I map the Product component but I get an error and it says undefined is not an object

Home.js

import * as React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { Card, Button } from 'react-native-elements';
import Product from './components/Product';

const BASE_URL = 'https://raw.githubusercontent.com/sdras/sample-vue-shop/master/dist';

const products = [
  {
    name: 'Khaki Suede Polish Work Boots',
    price: 149.99,
    img: `${BASE_URL}/shoe1.png`
  },
  {
    name: 'Camo Fang Backpack Jungle',
    price: 39.99,
    img: `${BASE_URL}/jacket1.png`
  },
  {
    name: 'Parka and Quilted Liner Jacket',
    price: 49.99,
    img: `${BASE_URL}/jacket2.png`
  },
  {
    name: 'Cotton Black Cap',
    price: 12.99,
    img: `${BASE_URL}/hat1.png`
  },
];

function HomeScreen({ navigation }) {
  return (
    <ScrollView
          style={{
            flexGrow: 0,
            width: "100%",
            height: "100%",
          }}>
          {
            products.map((product, index) => {
              return(
                <View style={styles.row} key={index}>
                    <View style={styles.col}>
                      <Product/>
                    </View>
                </View>
              )
            })
          }
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  row: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
  },
  col: {
      flex: 1,
  },
});

export default HomeScreen;

Product.js:

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Card, Button } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';

function Product(props){

  const navigation = useNavigation();

  return(
    <Card
        image={{uri: this.props.product.img}}>
        <Text style={{marginBottom: 10, marginTop: 20 }} h2>
            {this.props.product.name}
        </Text>
        <Text style={styles.price} h4>
            {this.props.product.price}
        </Text>
        <Text h6 style={styles.description}>
            added 2h ago
        </Text>
        <Button
        type="clear"
        title='Buy now'
        onPress={() => navigation.navigate('Details')}
        />
    </Card>
  );
}

const styles = StyleSheet.create({
    name: {
        color: '#5a647d',
        fontWeight: 'bold',
        fontSize: 30
    },
    price: {
        fontWeight: 'bold',
        marginBottom: 10
    },
    description: {
        fontSize: 10,
        color: '#c1c4cd'
    }
});

export default Product;

Error screenshot:

how to solve my problem

Answer 1

Please update your home component to this

function HomeScreen({ navigation }) {
  return (
    <ScrollView
          style={{
            flexGrow: 0,
            width: "100%",
            height: "100%",
          }}>
          {
            products.map((product, index) => {
              return(
                <View style={styles.row} key={index}>
                    <View style={styles.col}>
                      <Product product={product}/>
                    </View>
                </View>
              )
            })
          }
    </ScrollView>
  );
}

Basically you need to pass the product as a prop to Product component.

There is no this in functional component. Please update your product component

function Product(props){

 const navigation = useNavigation();

 return(
   <Card
       image={{uri: this.props.product.img}}>
       <Text style={{marginBottom: 10, marginTop: 20 }} h2>
           {props.product.name}
       </Text>
       <Text style={styles.price} h4>
           {props.product.price}
       </Text>
       <Text h6 style={styles.description}>
           added 2h ago
       </Text>
       <Button
       type="clear"
       title='Buy now'
       onPress={() => navigation.navigate('Details')}
       />
   </Card>
 );
}

Answer 2

Pass props in home component to product like this.

const products = [
{
name: 'Khaki Suede Polish Work Boots',
price: 149.99,
img: `${BASE_URL}/shoe1.png`,
},
{
name: 'Camo Fang Backpack Jungle',
price: 39.99,
img: `${BASE_URL}/jacket1.png`,
},
{
name: 'Parka and Quilted Liner Jacket',
price: 49.99,
img: `${BASE_URL}/jacket2.png`,
},
{
name: 'Cotton Black Cap',
price: 12.99,
img: `${BASE_URL}/hat1.png`,
},
];
function HomeScreen({navigation}) {
return (
<ScrollView
style={{
flexGrow: 0,
width: '100%',
height: '100%',
}}>
{products.map((product, index) => {
return (
<View style={styles.row} key={index}>
<View style={styles.col}>
<Product product={products} />
</View>
</View>
);
})}
</ScrollView>
);
}

------------Product.js-----------

function Product({product}) {
  const navigation = useNavigation();
  return (
    <Card image={{uri: product.img}}>
      <Text style={{marginBottom: 10, marginTop: 20}} h2>
        {product.name}
      </Text>
      <Text style={styles.price} h4>
        {product.price}
      </Text>
      <Text h6 style={styles.description}>
        added 2h ago
      </Text>
      <Button
        type="clear"
        title="Buy now"
        onPress={() => navigation.navigate('Details')}
      />
    </Card>
  );
}