title: When should we define a function inside a React class as arrow function?
body: <p>I'm creating a web page using React. There is a <code>textarea</code> where we could input a text. Thus, inside <code>return</code>, <code>onChange</code> is linked to a function named <code>inputChange</code>:</p>
  
  <pre><code>&lt;textarea value={this.state.text} onChange=...&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>Regarding <code>inputChange</code>, one way is to define it as a method (called <code>object method</code>?):</p>
  
  <pre><code>inputChange (event) {
    let value = event.target.value;
    this.setState((s) =&gt; ({ ...s, text: value }));
  }
  </code></pre>
  
  <p>Another way is to define it as an arrow function (called <code>class property</code>?):</p>
  
  <pre><code>inputChange = (event) =&gt; {
    let value = event.target.value;
    this.setState((s) =&gt; ({ ...s, text: value }));
  }
  </code></pre>
  
  <p>(One thing I notice is that if we define <code>inputChange</code> as arrow function, we can see <code>inputChange</code> as a property of <code>this</code>, when we print <code>this</code> inside e.g., <code>render</code>.)</p>
  
  <p>Does anyone know which way is be better? In general, when should we define a function inside a React class as arrow function?</p>