TypeError: undefined is not an object (evaluating 'route.params.prodId') - react-navigation

Question

i want to navigate to other screen while clicking on icon in naviagtion and passing a value but there is error
here is the component from where i want to navigate through passing the values
const UserProductScreen = (props) => {
const userProducts = useSelector((state) => state.products.userProducts);
const dispatch = useDispatch();
const editProductHandler = (id) => {
props.navigation.navigate('editProduct', {
prodId: id,
});
};
return (
<FlatList
data={userProducts}
keyExtractor={(item) => item.id}
renderItem={(itemData) => (
<ProductItem
image={itemData.item.imageUrl}
title={itemData.item.title}
price={itemData.item.price}
onselect={() => {
editProductHandler(itemData.item.id);
}}>
<Button
title="Edit"
onPress={() => {
editProductHandler(itemData.item.id);
}}
/>
<Button
title="Delete"
onPress={() => {
dispatch(productAction.deleteProduct(itemData.item.id));
}}
/>
</ProductItem>
)}
/>
);
};
export default UserProductScreen;
here is the component in which i receive the value passed by other component
const EditProductScreen = ({route, navigation}) => {
const {prodId} = route.params;
const editedProduct = useSelector((state) =>
state.products.userProducts.find((prod) => prod.id === prodId),
);
const [title, setTitle] = useState(editedProduct ? editedProduct.title : '');
const [imageUrl, setImageUrl] = useState(
editedProduct ? editedProduct.imageUrl : '',
);
const [price, setPrice] = useState('');
const [description, setDescription] = useState(
editedProduct ? editedProduct.description : '',
);
const dispatch = useDispatch();
return (
<ScrollView>
<View style={styles.form}>
<View style={styles.formControl}>
<Text style={styles.label}>Title</Text>
<TextInput
style={styles.input}
value={title}
onChangeText={(text) => setTitle(text)}
/>
</View>
<View style={styles.formControl}>
<Text style={styles.label}>Image url</Text>
<TextInput
style={styles.input}
value={imageUrl}
onChangeText={(text) => setImageUrl(text)}
/>
</View>
{editedProduct ? null : (
<View style={styles.formControl}>
<Text style={styles.label}>Price</Text>
<TextInput
style={styles.input}
value={price}
onChangeText={(text) => setPrice(text)}
/>
</View>
)}
<View style={styles.formControl}>
<Text style={styles.label}>Description</Text>
<TextInput
style={styles.input}
value={description}
onChangeText={(text) => setDescription(text)}
/>
</View>
{editedProduct ? (
<Button
title="updated"
onPress={() => {
dispatch(
productsAction.updateProduct(
prodId,
title,
description,
imageUrl,
),
);
}}
/>
) : (
<Button
title="Add product"
onPress={() => {
dispatch(
productsAction.createProduct(
title,
description,
imageUrl,
price,
),
);
}}
/>
)}
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
form: {
margin: 20,
},
formControl: {
width: '100%',
},
label: {
marginVertical: 8,
},
input: {
paddingHorizontal: 2,
paddingVertical: 5,
borderBottomColor: '#ccc',
borderBottomWidth: 1,
},
});
export default EditProductScreen;
here is the file in which navigation code exists
const Stack = createStackNavigator();
const Stackorder = createStackNavigator();
const StackUserProduct = createStackNavigator();
const Drawer = createDrawerNavigator();
const stacknavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Product"
component={ProductOverviewScreen}
options={({navigation}) => ({
headerTitle: 'Products',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerRight: () => (
<TouchableOpacity onPress={() => navigation.navigate('Cart')}>
<Icon name="cart-plus" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="align-justify" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="Detail"
component={ProductDetailScreen}
options={{
headerTitle: 'Detail',
headerTintColor: '#EBF2FA',
headerStyle: {
backgroundColor: '#273469',
},
}}
/>
<Stack.Screen
name="Cart"
component={CartScreen}
options={{
headerTitle: 'Orders',
headerTintColor: '#EBF2FA',
headerStyle: {
backgroundColor: '#273469',
},
}}
/>
<Stack.Screen
name="order"
component={OrderScreen}
options={({navigation}) => ({
headerTitle: 'Order',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="align-justify" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
};
const stacknavigatorOrder = () => {
return (
<Stackorder.Navigator>
<Stack.Screen
name="order"
component={OrderScreen}
options={({navigation}) => ({
headerTitle: 'Order',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="align-justify" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
})}
/>
</Stackorder.Navigator>
);
};
const stacknavigatorUserProduct = () => {
return (
<StackUserProduct.Navigator>
<Stack.Screen
name="userProduct"
component={UserProductScreen}
options={({navigation}) => ({
headerTitle: 'User Products',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerRight: () => (
<TouchableOpacity
onPress={() => navigation.navigate('editProduct')}>
<Icon name="pencil" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="align-justify" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="editProduct"
component={EditProductScreen}
options={({navigation}) => ({
headerTitle: 'User Products',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerRight: () => (
<TouchableOpacity
onPress={() => {
console.log();
}}>
<Icon name="check" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="align-justify" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
})}
/>
</StackUserProduct.Navigator>
);
};
const ShopNavigator = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Products">
<Drawer.Screen name="Products" component={stacknavigator} />
<Drawer.Screen name="Order" component={stacknavigatorOrder} />
<Drawer.Screen name="Admin" component={stacknavigatorUserProduct} />
</Drawer.Navigator>
</NavigationContainer>
);
};
const styles = StyleSheet.create({
iconstyle: {
margin: 15,
color: '#EBF2FA',
},
});
export default ShopNavigator;