score:48
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);
score:3
it is not a problem of arrow function but using it inside class declaration, this code will work in constructor body or any other function body but not in class declaration.
code should look just like that:
handleupdateinput(value){
this.setstate({
datasource: [
value,
value + value,
value + value + value,
],
});
};
using arrow function can be done inside any class method, but not inside class declaration. for example using arrow function in constructor:
constructor(props,context){
super(props,context);
this.somefunc = ()=>{
//here function code
};
}
Source: stackoverflow.com
Related Query
- Unable to use Arrow functions inside React component class
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- How to use React Context inside function of Class component
- Should I call a function on every render or use arrow functions in a react class component?
- React hook unable to be called inside of class component
- Refactoring React Class component to Functional, how to use action creator inside useEffect()
- Using arrow functions inside React component does not transfer over parent context (which exists). this remains undefined in arrow function
- Unable to load React class component inside other class component
- Correct use of arrow functions in React
- Can I use arrow functions instead of normal functions for React Hooks?
- Unable to use useState in class component React.js
- Typescript with React - use HOC on a generic component class
- how to use a CDN inside a React component
- Testing functions inside stateless React component with Enzyme
- When using React Is it preferable to use fat arrow functions or bind functions in constructor?
- Material UI: Use theme in React Class Component
- Should one use const when declaring an arrow function in React class
- How do I test component methods on a React component that are defined as arrow functions (class properties)?
- use of variable inside render function of react component
- How to use arrow functions inside React.createClass
- How can one use a polymer component inside a react component ? Is it possible?
- Babel Plugin Class Properties – React Arrow Functions
- Using a React hook inside a class component
- Is it a bad practice to use state in a React component if the data will not change? Should I use a property on the class instead?
- Unable to print javascript variable text in html inside a react component
- Can't use fat arrow functions (ES6) in react
- Is it possible to use React Hooks in class component by using HOC(Higher Order Component)?
- How to use multiple or two state values in one component or class file in react JS?
- Unable to use const within a class in React
- how to use Context for class Component in other module in React js
More Query from same tag
- Conditional rendering to choose display setup
- Cannot read property 'array' of undefined
- REACT component is sticking to page?
- Create a React componenent by grouping an array by index range in JS
- Fetching data from store if exists or call API otherwise in React
- React Hooks setTimeout and clearTimeout
- async load iframe in react
- Fetch() function causing a resourse blocked by CORS
- React Router get which `<NavLink />` is active?
- React filter function
- react-router and pretty URLs
- ReactJS image depend on the time
- npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
- Cannot execute a setter in a loop
- React.js Navbar Hamburger Menu won't toggle closed
- Smart array filtering JS
- Add Tooltip over a button
- Changing routes after successfully saga
- Rendering react component in html page
- 'ReactDOM' is not defined when I use webpack.ProvidePlugin() with ESlint
- react-router stops routing after rerender from a concurrent event
- Pokedex project api react js
- How do I write conditional code for added data to existing Fetch API call in React?
- Get the value from url using react js
- How to reset state when route changes?
- Multiple/bulk delete in react + redux
- Ruby on Rails does not include Authorization token on header when request by axios in React, but it does work with Postman
- Invalid hook call. Hooks can only be called inside the body of a functional component
- How to pass route props into my functional component
- Rendering checkboxes based on one array, and checked elements based on the second array