CODEWITHSUNDEEP
javascriptreactjsreact-native
Muhammad Hamza Nisar
Muhammad Hamza Nisar

Reputation: 601

TypeError: Unable to set property 'props' of undefined or null reference - react native component

I'm new in react native. as i checked my code is fine where i am learning from about component but still getting error for props even in documentation react native using props component as i am using but why still getting error check document link (https://facebook.github.io/react-native/docs/props)

    import React, {Component} from 'react';
    import { StyleSheet, Text, View } from 'react-native';

    class UserInformation extends Component(){
      render(){
        return(
          <View>
            <Text>{this.props.Name}</Text>
            <Text>{this.props.Status}</Text>
          </View>
        );
      }

}

function App() {

  return (
    <View style={styles.container}>

       <UserInformation Name='Hamza' Status='Single' />
       <UserInformation Name='Shahwar' Status='Comitted' />
    </View>
  );
}

export default App;

Error: TypeError: Unable to set property 'props' of undefined or null reference

Upvotes: 0

Views: 308

Answers (2)

Mario Subotic
Mario Subotic

Reputation: 131

If you're using Class Component you need to change

class UserInformation extends Component(){

to

class UserInformation extends React.Component{

and add 

constructor(props) {
 super(props) // <---- this is the part which give you this.props
}

But ... I suggest you use function component like App()

const UserInformation = (props) => {
        return(
          <View>
            <Text>{props.Name}</Text>
            <Text>{props.Status}</Text>
          </View>
        );
}

Upvotes: 0

Jai
Jai

Reputation: 74738

You can't extend a functional component. Instead seems to me it is a typo error here: 

class UserInformation extends Component{
                            //--------^^-------remove ()

Upvotes: 3

Related Questions