Uncaught TypeError: Cannot read property 'props' of null Uncaught TypeError: Cannot read property 'props' of null json json

Uncaught TypeError: Cannot read property 'props' of null


Since you are not using React.createClass in class methods this doesn't refers to the component instance, so you should bind it manually. There are several ways:

1. Manually bind this in class constructor

constructor(props) {    super(props);    this.sportsCornerPanel= this.sportsCornerPanel.bind(this);}

2. Use ES7 Property initializers with arrow function

sportsCornerPanel = () => {    debugger;    console.log("sportsCornerPanel"    console.log("this.props.sportsPanelState.size-->" + this.props);    if (this.props.sportsPanelState.size === 'hidden') {        if (!this.props.sportsPanelState.visible) {            this.props.dispatch(sportsOpenPanel());        } else {            this.props.dispatch(sportsClosePanel());        }    }}

3. Bind this at call-site

In render() method:

    let sportsContent, leftNavLink;    if (this.props.sports-layout !== 'small') {        console.log("SportsBox---page loads at bigger size");        console.log("SportsBox---page loads at ipad size");        sportsContent = <SportsBox className="sports-header"/>;    } else {        if (this.props.sportsPanelState.visible) {            console.log("sportsPanelState--when it becomes small--around ipad width");            sportsContent = <SportsBox className="sports-nav"/>;            leftNavLink = <a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink active"></a>;        } else {            if (this.props.sports.active) {                console.log("SportsBox");                sportsContent = <SportsBox className="sports-nav"/>;            } else {                console.log("leftNavLink--when it becomes small--around ipad width");                leftNavLink = <a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink"></a>;            }        }    }


Declare a local variable in constructor for capturing context.

I faced the same issue while using class className extends React.Component instead of createClass(). Create a variable in constructor to fix this.

constructor(props) {    super(props);    self = this;}

Use self.props instead of this.props everywhere!


It looks like you might be missing a getDefaultProps method on your React component. You might consider something generic like this, just to nullify the error and see what else is up:

getDefaultProps () { return {}; }