how to pass data between components using props in react native - 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>
);
}