React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined : <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>
