Unable to use Arrow functions inside React component class [duplicate]

by

It’s not the arrow function that’s causing a problem here. Class properties are not part of the ES6 specification.

handleUpdateInput = (value) => {
  // ...
};

If you want to be able to transform this code, you’ll need to add the class properties babel plugin.

Alternatively, this transform is provided as part of Babel’s stage 2 preset.

Using an arrow function with a class property ensures that the method is always invoked with the component as the value for this, meaning that the manual rebinding here is redundant.

this.handleUpdateInput = this.handleUpdateInput.bind (this);

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. Clean way to keep original variable and destructure at the same time
  3. Exporting functions with reactjs and babel
  4. What do multiple arrow functions mean in JavaScript?
  5. Null-safe property access (and conditional assignment) in ES6/2015
  6. Arrow function without curly braces
  7. Why shouldn’t JSX props use arrow functions or bind?
  8. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  9. Correct use of arrow functions in React
  10. React Native: require() with Dynamic String?
  11. Arrow Function in Object Literal [duplicate]
  12. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  13. ES6 exporting/importing in index file
  14. What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)
  15. What is the difference between using constructor vs state = {} to declare state in react component?
  16. Is there any one-line analogy in ES6 for ES5 `module.exports = require(‘./inner.js’)`?
  17. Active link with React-Router?
  18. Arrow functions and the use of parentheses () or {} or ({})
  19. Convert ES6 Iterable to Array
  20. What does calling super() in a React constructor do?
  21. Webpack babel 6 ES6 decorators
  22. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  23. Importing CSS files in Isomorphic React Components
  24. React.js ES6 avoid binding ‘this’ to every method
  25. Export multiple classes in ES6 modules
  26. map function not working in React
  27. How to load es6, react, babel code in html with cdn?
  28. React cannot read property map of undefined
  29. Re-export default in ES 6 modules
  30. gulp babel, exports is not defined

Leave a Comment