Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!