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());
            }
        }
    }


    render() {


        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} 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} href="javascript:;" className="header-navLink"></a>;
                }
            }
        }


output

Uncaught TypeError: Cannot read property 'props' of null