title: React State undefined after Set in componentDidMount
body: <p>This is Presentation file:</p>
  
  <pre><code>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(
              &lt;div&gt;
              &lt;input id="name" onChange={this.newZone.bind(this)} className="form-control" type="text" placeholder="Enter Zone Name" /&gt;&lt;br /&gt;
              &lt;input id="zipCodes" onChange={this.newZone.bind(this)} className="form-control" type="text" placeholder="Enter Zip Code" /&gt;&lt;br /&gt;
              &lt;button onClick={this.submitZone.bind(this)} className="btn btn-danger"&gt;Submit Comment&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  export default CreateZone
  </code></pre>
  
  <p>This is Container File:</p>
  
  <pre><code>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) =&gt; {
              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) =&gt; {
              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) =&gt; {
              return (
                  &lt;li key={i}&gt;
                      &lt;Zone currentZone={zone} /&gt;
                  &lt;/li&gt;
              )
          })
  
          return(
              &lt;div&gt;
                  &lt;ol&gt;
                      {listItems}
                  &lt;/ol&gt;
                  &lt;div&gt;
                      &lt;CreateZone onCreate={this.submitZone} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  export default Zones
  </code></pre>
  
  <p>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 </p>