title: Component not mounted when setState called in arrow function in React with ES2016
body: <p><strong><em>Note:</strong> I have restructured my question to make it more understandable. However, I have kept the older version for historical purposes.</em></p>
  
  <p>I have a React application and when I call <code>this.setState()</code> from an arrow function, I get the "component not mounted message". Here is my component:</p>
  
  <pre><code>import React, { Component } from 'react'
  
  class Test extends Component {
      state = {
          value: ''
      }
  
      onChange = (e) =&gt; {
          e.preventDefault()
          this.setState({
              value: e.target.value
          })
      }
  
      render() {
          return &lt;input value={ this.state.value } onChange={ this.onChange } /&gt;
      }
  }
  </code></pre>
  
  <p>When I type into the input, I get the following error message:</p>
  
  <pre><code>Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.
  </code></pre>
  
  <p>I am not sure why this is, because the arrow function should not have to be binned, and since this is triggered by typing, the component is obviously mounted.</p>
  
  <p>Thanks for any help!</p>
  
  <hr>
  
  <p><em>Here is the previous version of this question:</em></p>
  
  <blockquote>
    <p>I have a pretty standard React application and when I call <code>this.setState()</code> from an
    arrow function, I get the "component not mounted message".</p>
    
    <p>The code looks something like this:</p>
  
  <pre><code>onClick = () =&gt; {
      this.setState({clicked: true})
  }
  
  ...
  
  render() {
      return &lt;AnotherComponent onClick={ this.onClick } /&gt;
  }
  </code></pre>
    
    <p>When <code>onClick</code> is called, I get this message:</p>
  
  <pre><code>Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.
  </code></pre>
    
    <p>I'm not sure what is causing this, because I am using an arrow
    function but it is still not working.</p>
    
    <p><em>EDIT: As asked, here is <code>AnotherComponent</code>:</em></p>
  
  <pre><code>const AnotherComponent = (props) =&gt; {
      return (
        &lt;div&gt;
            &lt;Button primary&gt;Reject&lt;/Button&gt;
            &lt;Button primary onClick={ props.onClick }&gt;Edit Post&lt;/Button&gt;
            &lt;Button primary&gt;Approve&lt;/Button&gt;
        &lt;/div&gt;
      )
  }
  </code></pre>
    
    <p>Thanks</p>
  </blockquote>