javascript - React Child Calling Parent Method Can't Access State -

i have 3 components nested app->gamelist->gameitem

i have method on app(parent) component gets call via onclick event in gameitem(child) component

when gameitem component clicked fires app component method access state in app component.

however when try access state this.state.gamesvm

uncaught typeerror: cannot read property 'gamesvm' of null

.

app component

export default class app extends react.component {    state = {     userid: 3,     gamesvm: [],   }    componentdidmount() {     const pgames = getgames();     const ppicks = getpicks();     const pteams = getteams();      promise.all([pgames, ppicks, pteams])       .then(payload => {         const gamesvm = this.getgamesvm(payload);         this.setstate({gamesvm});       });   }    getgamesvm(payload) {     // ... code , map gamesvm   }    teampicked(team, away, home) { // gets called child component     console.log(this.state.gamesvm); // uncaught typeerror: cannot read property 'gamesvm' of null     console.log(this.state.userid); // uncaught typeerror: cannot read property 'userid' of null     // ...     console.log(this.state.anything); // uncaught typeerror: cannot read property 'anything' of null   }    render() {     return (       <div classname="app">         <form onsubmit={this.handlesubmit}>           <gamelist             gamesvm={this.state.gamesvm}             teampicked={this.teampicked}           />           <input type="submit" value="save" />         </form>       </div>     );   } } 

.

gamelist component

export default class gamelist extends react.component {   render() {     return (       <div classname='matchups'>         {this.props.gamesvm.map(game =>           <gameitem             teampicked={this.props.teampicked}             key={game.id}             {...game}           />         )}       </div>     )   } } 

.

gameitem component

export default class gameitem extends react.component {    render() {      let awaypickcheckbox = null;      if (!this.props.isgamestarted) {        awaypickcheckbox = <li>             <input type="checkbox" id={this.props.id + this.props.awayteam} />             <label               htmlfor={this.props.id + this.props.awayteam}               onclick={this.props.teampicked.bind(this, 'away', this.props.id + this.props.awayteam, this.props.id + this.props.hometeam)}             >               {this.props.awayteam}             </label>           </li>;      } else {        awaypickcheckbox = <li>             <label>{this.props.awayteam}</label>           </li>     }       return (       <div classname="single-matchup">         <ul classname="away-team clearfix">           {awaypickcheckbox}         </ul>       </div>     )   } } 

functions inside es6 classes not bound automatically.

you might define them properties , anonymous functions this:

teampicked = (team, away, home) => { // gets called child component     console.log(this.state.gamesvm); // uncaught typeerror: cannot read property 'gamesvm' of null     console.log(this.state.userid); // uncaught typeerror: cannot read property 'userid' of null     // ...     console.log(this.state.anything); // uncaught typeerror: cannot read property 'anything' of null   }