How to bind a function of a React component to "this" without a constructor?

Question

As many know, this.someFunction = this.someFunction.bind(this) can be used in React class components. However, sometimes it's burdensome to create classes for very simple components. So, how can I bind a function to this without creating a class?

• Shakil: you can use es6 arrow function. No need to bind this for that
• atmd: if you have a simple component how/why are you referencing this inside the component? pure functional components are generally for presentation and should have any values they need passed as props, whats the requirement to access this

Answer 1

use arrow function arrow function

• Angelos Chalaris: Your answer is correct, but I suggest you elaborate a little bit with an example, which would add some more value for future readers stumbling upon this question.

Answer 2

this makes sense in class component because it refers to component instance. It doesn't make sense in functional component because it is either undefined or a global, depending on the environment and how a function was declared.

As for class components, explicit constructor can be omitted if it's not needed, class fields can be used to assign instance properties, including bound methods:

class Foo extends Component {
 foo = this.foo.bind(this);
 foo() { ... }
 ...
}

Which is syntactic sugar for:

class Foo extends Component {
 constructor(props) {
 super(props);
 this.foo = this.foo.bind(this);
 }
 foo() { ... }
 ...
}

Bound prototype methods have several benefits over instance arrow methods.

Answer 3

In React 16.8, you can use hooks for stateful components, essentially allowing you to write everything as a function and eliminating the need to use classes and all the caveats that come with them (this, .bind() etc).

Usage example

Here's an example of using the useState() hook and the useEffect() hook inside a function, along with an arrow function, which is already bound to the component's context:

import React, { useState, useEffect } from 'react';
function LimitedTextarea({ rows, cols, value, limit }) {
 const [content, setContent] = useState(value);
 const setFormattedContent = text => {
 text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);
 };
 useEffect(() => {
 setFormattedContent(content);
 }, []);
 return (
 <div>
 <textarea
 rows={rows}
 cols={cols}
 onChange={event => setFormattedContent(event.target.value)}
 value={content}
 />
 <p>
 {content.length}/{limit}
 </p>
 </div>
 );
}

Short explanation

• You use useState() to create a state variable content and a method to update that variable, setContent().
• You create an arrow function setFormattedContent to update the content state variable via the setContent method, which is already bound to context.
• You use useEffect() to call setFormattedContent on the value of the content state variable.
• Finally, you return whatever you would have in your render() method in a class component.

Answer 4

Yes arrow function is the solution.

Bind with this,

this.someFunction = this.someFunction.bind(this)

Using arrow function,

someFunction = () => {
 // do something
}

Answer 5

There is no need to bind "this" If you use arrow function. It has simple and cleaner syntax.

someFuncton = () => {
 // whatever write here...
}