CODEWITHSUNDEEP
javascriptreactjsreact-native
Ar.
Ar.

Reputation: 51

undefined is not an object (evaluating '_this.props.type') react native

I'm new with react native and I'm building an app with sign in and sign up interfaces, trying to use (this.props.type) to control signings/signup button, but I got an error in my code, hope you guys help me :)

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  TextInput,
  TouchableOpacity,
  Text
} from 'react-native';

const Form: () => React$Node = () => {

    return (
    <View style={styles.container}>
        <TextInput style={styles.inputBox}
                   underlineColorAndroid= 'rgba(0,0,0,0)'
                   placeholder= "Phone Number"
                   autoCorrect={true}
                   textContentType="telephoneNumber"
                   keyboardType="numbers-and-punctuation"
                   placeholderTextColor = "#ffffff"
        />

        <TextInput style={styles.inputBox}
                   underlineColorAndroid= 'rgba(0,0,0,0)'
                   placeholder= "Email"
                   autoCorrect={true}
                   textContentType="emailAddress"
                   keyboardType="email-address"
                   placeholderTextColor = "#ffffff"
        />

        <TextInput style={styles.inputBox}
                   underlineColorAndroid= 'rgba(0,0,0,0)'
                   placeholder= "Email Password"
                   secureTextEntry={true}
                   placeholderTextColor = "#ffffff"
        />

        <TouchableOpacity style={styles.button}>
                  <Text style={styles.buttonText}>{this.props.type} </Text>
        </TouchableOpacity>
    </View>
    );
};

I also use these to lines in both sign in and sign up files :

<Form types="SignUp"/>
<Form types="SignIn"/>

Upvotes: 1

Views: 119

Answers (2)

Junius L
Junius L

Reputation: 16132

change Form to receive params

const Form: ({ types }) => React$Node = () => {

then use it like

<TouchableOpacity style={styles.button}>
  <Text style={styles.buttonText}>{types} </Text>
</TouchableOpacity>

and render your form

<Form types="SignUp"/>
<Form types="SignIn"/>

Form component without typescript

const Form = ({ types }) => (
  <View style={styles.container}>
    <TextInput
      style={styles.inputBox}
      underlineColorAndroid="rgba(0,0,0,0)"
      placeholder="Phone Number"
      autoCorrect={true}
      textContentType="telephoneNumber"
      keyboardType="numbers-and-punctuation"
      placeholderTextColor="#ffffff"
    />

    <TextInput
      style={styles.inputBox}
      underlineColorAndroid="rgba(0,0,0,0)"
      placeholder="Email"
      autoCorrect={true}
      textContentType="emailAddress"
      keyboardType="email-address"
      placeholderTextColor="#ffffff"
    />

    <TextInput
      style={styles.inputBox}
      underlineColorAndroid="rgba(0,0,0,0)"
      placeholder="Email Password"
      secureTextEntry={true}
      placeholderTextColor="#ffffff"
    />

    <TouchableOpacity style={styles.button}>
      <Text style={styles.buttonText}>{types} </Text>
    </TouchableOpacity>
  </View>
);

Upvotes: 1

Gaurav Roy
Gaurav Roy

Reputation: 12195

The problem is in your Text you are fetching this.props.type <Text style={styles.buttonText}>{this.props.type} </Text> but you are passing types <Form types="SignUp"/>

So change inside Text to 

<Text style={styles.buttonText}>{this.props.types} </Text>

hope it helps

Upvotes: 0

Related Questions