CODEWITHSUNDEEP
reactjsreact-native
Mohan
Mohan

Reputation: 385

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

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 : enter image description here

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>
  );
  }

Upvotes: 1

Views: 152

Answers (1)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19059

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 (
     
   )
}

Upvotes: 1

Related Questions