How to fix Uncaught TypeError: Cannot read property 'props' of null in React.js

In this post we will be discussing about how to fix "Uncaught TypeError: Cannot read property 'props' of null" in React.js.

Lets say for example I am creating a class component called RadioGroup via extending the Component and writing a function called radioItemChanged in it which will fire whenever the RadioButton in a RadioGroup will change.

export default class RadioGroup extends Component{
  constructor(props){
    super(props);
  }

  radioItemChanged(radioButton){
    console.log('Selected Option-------' + radioButton.id);
  }
}

Now if I try to write the below code in teh render() function, it might give an error "Uncaught TypeError: Cannot read property 'props' of null".

<input type="radio" checked="checked" name="radio" 

    onChange={()=>this.radioItemChanged(radioButton)} />

This is happening because when we do not create a class using React.createClass, the `this` doesn't refrence to the Component instance so for that we have to manually bind it, so our code will change as follows :

export default class RadioGroup extends Component{
  constructor(props){
    super(props);
    this.radioItemChanged = this.radioItemChanged.bind(this);
  }

  radioItemChanged(radioButton){
    console.log('Selected Option-------' + radioButton.id);
  }	
}

Please like and share the CodingDefined.com blog if you find it useful and helpful.



Related articles

How to create Simple Twitter Bot in Node.js 
Legacy Browser Support for using Babel 
Getting Started with Node.js Koa 2 Framework 
Web Scraping Libraries for Node.js Developers 
How to Create Simple RSS Reader in Ionic Application 
Simple RESTful API in Nodejs 
How to Get Latest Tweets of a particular HashTag using Nodejs 
How to Intercept HTTP requests in Node.js 
Node for Android 
Capture Screen of Web Pages through URL in Nodejs