reactjs - React State undefined after Set in componentDidMount -

this presentation file:

import react, { component } 'react'  class createzone extends component {     constructor(){         super()             this.state = {                 zone: {                     name: '',                     zipcodes: []                 }             }     }      newzone(event){         let newzone = object.assign({}, this.state.zone)         newzone[event.target.id] = event.target.value         this.setstate({             zone: newzone         })     }     submitzone(event){         this.props.oncreate(this.state.zone)     }      render(){         return(             <div>             <input id="name" onchange={this.newzone.bind(this)} classname="form-control" type="text" placeholder="enter zone name" /><br />             <input id="zipcodes" onchange={this.newzone.bind(this)} classname="form-control" type="text" placeholder="enter zip code" /><br />             <button onclick={this.submitzone.bind(this)} classname="btn btn-danger">submit comment</button>             </div>         )     } } export default createzone 

this container file:

import react, { component } 'react' import { zone, createzone  } '../presentation' import { apimanager } '../../utils'  class zones extends component {     constructor(){         super()         this.state = {             zone: {                 name: '',                 zipcodes: '',                 numcomments: ''             },             list: []         }     }      componentdidmount(){         console.log('componentdidmount')         apimanager.get('/api/zone', null, (err, response) => {             if(err){                 alert('error in zones: '+err.message)                 return             }              this.setstate({                 list: response.results             })         })      }      submitzone(zone){         let newzone = object.assign({}, zone)          apimanager.post('/api/zone', newzone, (err, response) => {             if(err) {                 alert('error in new zone: '+err.message)                 return             }             console.log('newzone: '+json.stringify(response))             let updatedlist = object.assign([], this.state.list)             updatedlist.push(response.result)             this.setstate({                 list: updatedlist             })           })     }      render(){          const listitems = this.state.list.map((zone, i) => {             return (                 <li key={i}>                     <zone currentzone={zone} />                 </li>             )         })          return(             <div>                 <ol>                     {listitems}                 </ol>                 <div>                     <createzone oncreate={this.submitzone} />                 </div>             </div>         )     } } export default zones 

react doesn't re-render , console log error "cannot read property 'list' of undefined" worked fine before moved form in presentation file. training me , love understand going on

the function submitzone in zones component didn't "this" binded. giving "this.state" undefined. bind "this" same

<button onclick={this.submitzone.bind(this)} classname="btn btn-danger">submit comment</button> 

so replace line

<createzone oncreate={this.submitzone} /> 

with

<createzone oncreate={this.submitzone.bind(this)} />