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