React State undefined after Set in componentDidMount - reactjs

Question

This is Presentation file:
import React, { Component } from '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 is Container File:
import React, { Component } from 'react'
import { Zone, CreateZone } from '../presentation'
import { APImanager } from '../../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 and console log error is "Cannot read property 'list' of undefined"
It worked fine before I moved form in to presentation file. This is training for me and I would love to understand what is going on

Answer 1

The function submitZone in Zones Component is didn't get the "this" binded. So it was giving "this.state" as undefined. Bind the "this" same as
<button onClick={this.submitZone.bind(this)} className="btn btn-danger">Submit Comment</button>
So replace the line
<CreateZone onCreate={this.submitZone} />
with
<CreateZone onCreate={this.submitZone.bind(this)} />