title: TypeError: Cannot read property 'fishes' of undefined
body: <p>Hi I'm just trying to figure out why I'm getting this error - TypeError: Cannot read property 'fishes' of undefined. What I'm missing?</p>
  
  <p>My App.js:</p>
  
  <pre><code>class App extends Component {
  constructor() {
  super();
  this.state = {
    fishes : {},
    order : {}
  }
  }
  
  addFish(fish) {
  var timestamp = (new Date()).getTime();
  // update the state object
  this.state.fishes['fish-' + timestamp] = fish;
  // set the state
  this.setState({ fishes : this.state.fishes });
  }
  
  render() {
  return (
    &lt;div className="ui container"&gt;&lt;br/&gt;
    ...
  </code></pre>
  
  <p>Then my AddFishForm:</p>
  
  <pre><code>class AddFishForm extends Component {
  createFish(event) {
  event.preventDefault();
  var fish = {
    name : this.refs.name.value,
    price : this.refs.price.value,
    status : this.refs.status.value,
    desc : this.refs.desc.value,
    image : this.refs.image.value
  }
  
  this.props.addFish(fish);
  this.refs.fishForm.reset();
  }
  render() {
  return (
      &lt;form className="ui equal width form" ref="fishForm" onSubmit=
       {this.createFish.bind(this)}&gt;
        &lt;div className="fields"&gt;
  ...
  </code></pre>
  
  <p>The message in console looks like this:
  <a href="https://i.stack.imgur.com/peFjY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/peFjY.png" alt="enter image description here"></a></p>