Navigating to other screen in combination with redux - reactjs

Question

I have the following to Component:
RestaurantTemplate :
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { ImageBackground, StyleSheet, View,TouchableOpacity} from 'react-native';
import { RestaurantData } from '../../Data';
import { connect } from 'react-redux';
import Restaurant from './Restaurant';
class RestaurantOverviewTemplate extends React.Component{
render() {
return(
<View style={{ flex: 1, justifyContent: 'center' }}>
<Restaurant restaurants={RestaurantData} onPress={this.props.changeToRestaurantId}/>
</View>
)
}
}
const mapDispatchToProps = (dispatch) => {
return {
changeToRestaurantId: (restaurants) => dispatch({ type: 'UPDATE_ID', payload: restaurants })
}
}
export default connect(null, mapDispatchToProps)(RestaurantOverviewTemplate);
Restaurant.js :
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
export default class Restaurant extends React.Component {
renderRestaurant = (restaurants) =>{
return restaurants.map((item, index) => {
return(
<View key={ index }>
<Button onPress={ () => this.props.onPress(item.id) } title={ item.name }/>
</View>
)
});
}
render() {
return (
<View>
{this.renderRestaurant(this.props.restaurants)}
</View>
)
}
}
So I have the RestaurantTemplate in which the Restaurant.js component is imported. What was my intension is to extract the id of a restaurant and pass it to the mapDispatchToProps function that updates a global variable. But my problem is that I want to navigate to another screen when one restaurant is pressed. I thought I could do this like so:
<Restaurant
restaurants={RestaurantData}
onPress={[this.props.changeToRestaurantId, () => this.props.navigation.navigate('RestaurantDetails']}
/>
But this won't work. I also can't wrap a TouchableOpacity around the <Restaurant../>.
Has anybody an idea how I could fix this?
Thanks in advance!!

Answer 1

It looks as though you want to invoke more than one function in the callback. You can wrap both calls in an anonymous function. Proxy the passed restaurant id to changeToRestaurantId and invoke the navigation. This, of course, assumes you have correctly injected navigation as a prop into RestaurantOverviewTemplate component.
<Restaurant
restaurants={RestaurantData}
onPress={(id) => {
this.props.changeToRestaurantId(id);
this.props.navigation.navigate('RestaurantDetails');
}}
/>