StochasticNerd StochasticNerd -4 years ago 164
React JSX Question

Uncaught TypeError: Cannot read property 'props' of null in React

This is my child component that needs to pass data up to its parent.

class Sidebar extends React.Component {

let value = document.getElementById('input-button').value;

render() {
return (
<input type="text" id="input-button" placeholder="YGUID" />

<button type="button" className="btn btn-info btn-icons" onClick={this.getUserInput} />



Sidebar.propTypes = {
handleSubmit: React.PropTypes.func

This is where the parent is calling handleSubmit.

<div className="col-md-2 left-pane">
<Sidebar handleSubmit= {this.handleSubmit}/>


I get the following error.

Uncaught TypeError: Cannot read property 'props' of null

What am I doing wrong here.

Answer Source

this.getUserInput function passed to the Sidebar props is not bound to the correct context (this) when it is called. You can for example bind it:

<Sidebar handleSubmit={this.handleSubmit.bind(this)}/>

There are also other options how to sovle this. For example using arrow functions which has lexical this, binding methods in constructor or using class properties to define methods with arrow functions (ES7).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download