title: How to bind this to React ES6 getter and setter functions?
body: <p>When we want to use <code>this</code> from inside an ES6 function, we need to say so in the constructor.</p>
  
  <pre><code>export class MyComponent extends React.Component {
       constructor(){
            super();
            this.myFunc = this.myFunc.bind(this);
       }
  
       myFunc(){
          /*
              Now inside this function, this is now referring to our
              component. We can now access props, states, and refs
              because we declared 'this.myFunc = this.myFunc.bind(this);'
              in the constructor.
          */
       }
  }
  </code></pre>
  
  <p>But there are getter functions, and I cannot use the same function binding "syntax" as I do with regular functions:</p>
  
  <pre><code>get value(){
     return this.state.oneOfMyValues;
     /*
        The above does not work. this.state is undefined, so is .refs,
        so is .props, because 'this' is not the component itself.
     */
  }
  </code></pre>
  
  <p>As I've said, binding value() in the constructor doesn't work:</p>
  
  <pre><code>    constructor(){
         super();
         this.myFunc = this.myFunc.bind(this); // This works. It's a regular function.
         this.value = this.value.bind(this); 
         /* No compilation errors for this code, but it doesn't work. The 'this'
            inside the get value() function is still not the component.
         */
  
  
         this.state = {}; 
         /* as suggested, but this.state is still undefined from
            inside get value().
         */
      }
  </code></pre>
  
  <p>I cannot use arrow functions on a getter function like I can with a regular function.</p>
  
  <p>HOW do we bind a getter (and probably also a setter) function to the component so that the 'this' inside it refers to the component? As much as possible, I don't want to use <code>React.createClass({})</code> "syntax". If I have to go back to the createClass way, what is the point of being able to write getter and setter functions in ES6 if we don't have access to our component via 'this'?</p>
  
  <p><strong>Usage</strong> This is parentcomponent.js</p>
  
  <pre><code>@import React from 'react';
  @import { MyComponent } from './mycomponent.js';
  
  export class ParentComponent extends React.Component {
  
       clickMe = () =&gt; {
           console.log(this.refs.myComponent.value);
           /*
               Does not return anything because the get value()
               function of MyComponent has no access to its state,
               props, etc.
           */
       }
  
       render(){
          return(
               &lt;div className="parent-component"&gt;
                    &lt;span onClick={this.clickMe}&gt;Click Me&lt;/span&gt;
                    &lt;MyComponent ref="myComponent" /&gt;
               &lt;/div&gt;
          );
       }
  }
  </code></pre>