Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class

by

The value of this primarily depends on how the function is called. Given d.speak();, this will refer to d because the function is called as an “object method”.

But in <div>{this.renderElements}</div> you are not calling the function. You are passing the function to React which will call it somehow. When it is called, React doesn’t know which object the function “belonged” to so it cannot set the right value for this. Binding solves that

I actually think what you really want is

<div>{this.renderElements()}</div>
//         call function ^^

i.e call the function as an object method. Then you don’t have to bind it.

Have a look at MDN to learn more about this.

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. What do multiple arrow functions mean in JavaScript?
  3. Adding script tag to React/JSX
  4. Arrow function without curly braces
  5. Why shouldn’t JSX props use arrow functions or bind?
  6. When to use ES6 class based React components vs. functional ES6 React components?
  7. Why and when do we need to bind functions and eventHandlers in React?
  8. What does three dots do in ReactJS [duplicate]
  9. React Native: require() with Dynamic String?
  10. Concatenating variables and strings in React
  11. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  12. What is the difference between using constructor vs state = {} to declare state in react component?
  13. React useState hook event handler using initial state
  14. Active link with React-Router?
  15. When should I use brackets with imports
  16. ES6 array map doesn’t return anything: ReactJS
  17. Arrow functions and the use of parentheses () or {} or ({})
  18. Why React Hook useState uses const and not let
  19. What does calling super() in a React constructor do?
  20. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  21. React.createClass vs. ES6 arrow function
  22. this.setState is not a function [duplicate]
  23. React.js ES6 avoid binding ‘this’ to every method
  24. Error: How to serialize data from getStaticProps : Next.js
  25. Update one of the objects in array, in an immutable way
  26. map function not working in React
  27. How to namespace es6 classes (for React components)
  28. React cannot read property map of undefined
  29. Deep nested array of objects not rendering
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment