Uncaught TypeError: Cannot read property 'props' of null

Question

• I have a react code
• this code renders various panels in the UI.
• when I click a tag, this function is called sportsCornerPanel()
• but I am getting

Answer 1

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 = ;
    } else {
        if (this.props.sportsPanelState.visible) {
            console.log("sportsPanelState--when it becomes small--around ipad width");

            sportsContent = ;
            leftNavLink = ;
        } else {
            if (this.props.sports.active) {

                console.log("SportsBox");

                sportsContent = ;
            } else {

                console.log("leftNavLink--when it becomes small--around ipad width");

                leftNavLink = ;
            }
        }
    }