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.
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".
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 :
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
No comments:
Post a Comment