title: React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined
body: <p>I'm getting this error <strong><em>Uncaught TypeError: Cannot read property 'state' of undefined</em></strong> whenever I type anything in the input box of AuthorForm. I'm using React with ES7.</p>
  
  <p>The error occurs on <strong>3rd line of setAuthorState function in ManageAuthorPage</strong>. Regardless of that line of code even if I put a console.log(this.state.author) in setAuthorState, it will stop at the console.log and call out the error. </p>
  
  <p>Can't find similar issue for someone else over the internet.</p>
  
  <p>Here is the <strong>ManageAuthorPage</strong> code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import AuthorForm from './authorForm';
  
  class ManageAuthorPage extends Component {
    state = {
      author: { id: '', firstName: '', lastName: '' }
    };
  
    setAuthorState(event) {
      let field = event.target.name;
      let value = event.target.value;
      this.state.author[field] = value;
      return this.setState({author: this.state.author});
    };
  
    render() {
      return (
        &lt;AuthorForm
          author={this.state.author}
          onChange={this.setAuthorState}
        /&gt;
      );
    }
  }
  
  export default ManageAuthorPage 
  </code></pre>
  
  <p>And here is the <strong>AuthorForm</strong> code: </p>
  
  <pre><code>import React, { Component } from 'react';
  
  class AuthorForm extends Component {
    render() {
      return (
        &lt;form&gt;
                  &lt;h1&gt;Manage Author&lt;/h1&gt;
          &lt;label htmlFor="firstName"&gt;First Name&lt;/label&gt;
                  &lt;input type="text"
                      name="firstName"
            className="form-control"
                      placeholder="First Name"
            ref="firstName"
            onChange={this.props.onChange}
                      value={this.props.author.firstName}
            /&gt;
          &lt;br /&gt;
  
          &lt;label htmlFor="lastName"&gt;Last Name&lt;/label&gt;
                  &lt;input type="text"
                      name="lastName"
            className="form-control"
                      placeholder="Last Name"
            ref="lastName"
                      onChange={this.props.onChange}
            value={this.props.author.lastName}
                      /&gt;
  
                  &lt;input type="submit" value="Save" className="btn btn-default" /&gt;
              &lt;/form&gt;
      );
    }
  }
  
  export default AuthorForm
  </code></pre>