Component Exception : undefined is not an object ( evaluating 'props.textInputId') - reactjs

Question

I've two functional components CustomerDetails and other is MainDetails i want the state value of textInputName and textInputId, so i pass props in MainDetails component
But im getting error :
const CustomerDetails = ({ navigation }) => {
const [textInputName, setTextInputName] = React.useState("");
const [textInputId, setTextInputId] = React.useState("");
return (
<View style={styles.container}>
<NavigationBar
componentCenter = { () => <ComponentCenter /> }
navigationBarStyle= {{ backgroundColor:'#0095ff87' }}
statusBarStyle = {{ barStyle: 'light-content', backgroundColor: '#215e79' }}
/>
<Text style = { styles.heading }>Customer Details</Text>
{ error ?
<Text style={{color: 'red', textAlign:'center'}}>{error}
</Text> : null
}
<TextInput
style = {styles.input}
placeholder ="Enter Doctor Id"
onChangeText ={
(value) => setTextInputId(value)
}
value = { textInputId }
underlineColorAndroid="transparent"
/>
<TextInput
style = {styles.input}
placeholder = "Enter Name"
onChangeText = {
(value) => setTextInputName(value)
}
value = { textInputName }
underlineColorAndroid="transparent"
/>
<TextInput
style = {styles.input}
placeholder = "Enter Email(optional)"
underlineColorAndroid="transparent"
/>
<View style={{ marginTop: 15 }}>
<TouchableOpacity
style = {styles.submitButton}
onPress={() => {
if (textInputId.trim() === "") {
setError("Id Required.")
}
else if( textInputName.trim() === ""){
setError("Name Required.")
}
else{
navigation.navigate('MainDetails')}}
}>
<Text style = {styles.submitButtonText}> Connect </Text>
</TouchableOpacity>
</View>
</View>
)}
const MainDetails = ({ navigation, props }) => {
var idData = props.textInputId
var nameData = props.textInputName
return (
)}
function Customer() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="CustomerDetails" component={CustomerDetails} />
<Stack.Screen name="MainDetails" component={MainDetails} />
</Stack.Navigator>
</NavigationContainer>
);
}

Answer 1

You need to pass params to MainDetails via route (assuming you're using React Navigation): https://reactnavigation.org/docs/params/
So your code should look like:
const CustomerDetails = ({ navigation }) => {
const [textInputName, setTextInputName] = React.useState("");
const [textInputId, setTextInputId] = React.useState("");
...
navigation.navigate('MainDetails', { textInputId, textInputName })
...
const MainDetails = ({ navigation, route }) => {
const { textInputId, textInputName } = route.params;
return (
)
}