Tiffany R. White Blog

Dark Mode
Light Mode

How to Bind this in React Without a Constructor

April 25, 2018 • ☕️ 1 min read

this in React is a reference to the current component. Usually this in React is bound to its built-in methods so that when you want to update state or use an event handler on a form, you could do something like this:

<input type="text" ref={this.someInput} required placeholder="This is a Method" defaultValue={getSomeMethod()}/>

where this.someInput is passing state to whichever React component you are rendering.

Unfortunately, though, React doesn’t auto-bind this to custom methods. This means if I wanted to manipulate the DOM by getting some input, which you can’t do as you can with normal JavaScript, I would create a ref to do whatever DOM tinkering I wanted.

But because React doesn’t auto-bind this, the following code would output undefined when logged:

someInput = React.createRef();
  renderSomeInput (event) {
    event.preventDefault();
    const someFunction = this.someInput.value.value;
    console.log(this);
  }

In order to avoid this, we could use the constructor function in order to initialize or get the state we want:

class SomeCompenent extends React.Component {
  constructor() {
    super();
    this.renderSomeInput.bind(this);
  }
}

While this is a decent way to initialize state, what if you wanted to bind several custom methods in one component? It would get pretty messy…

class SomeCompenent extends React.Component {
  constructor() {
    super();
    this.renderSomeInput.bind(this);
    this.renderSomeInput.bind(this);
    this.renderSomeInput.bind(this);
    this.renderSomeInput.bind(this);
   }
}

You get the idea.

Instead, we can bind this to custom React methods by declaring a method and assigning it to an arrow function:

class SomeCompenent extends React.Component {

  someInput = React.createRef();
    renderSomeInput = (event) =>  {
    event.preventDefault();
    const someFunction = this.someInput.value.value;
    console.log(this);
    }
  }

which will allow us to bind the value of this to the SomeComponent component.

Share article
LinkedIn

Discuss on TwitterEdit on GitHub


Tiffany R. White Blog

Tiffany White

Blog of Tiffany White. Thoughts on React & web development. My stuff: /uses.