How to bind this to React ES6 getter and setter functions?

Question

When we want to use this from inside an ES6 function, we need to say so in the constructor.

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.
        */
     }
}

But there are getter functions, and I cannot use the same function binding "syntax" as I do with regular functions:

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.
   */
}

As I've said, binding value() in the constructor doesn't work:

    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().
       */
    }

I cannot use arrow functions on a getter function like I can with a regular function.

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 React.createClass({}) "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'?

Usage This is parentcomponent.js

@import React from 'react';
@import { MyComponent } from './mycomponent.js';

export class ParentComponent extends React.Component {

     clickMe = () => {
         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(
             <div className="parent-component">
                  <span onClick={this.clickMe}>Click Me</span>
                  <MyComponent ref="myComponent" />
             </div>
        );
     }
}

Answer 1

Following your comment, it is an issue of this.state initialisation . Indeed , in the getter, you are using this.state. oneOfMyValues however this.state is not defined .

Then , the solution is to declare this.state = {} inside the constructor of component.

constructor(){
   super();
   this.myFunc = this.myFunc.bind(this); // This works. It's a regular function.
   // this.value = this.value.bind(this); <-- NO NEED
   this.state = {} ; //⚠️
}

---

For the binding, you can log the this.constructor inside getter and you will be sure that getters and setters does not require manual binding.

get value(){
   console.log(this.constructor.name) //🔮 Expect to log "MyComponent"
   return this.state.oneOfMyValues;
}