score:4
i've never it actively discouraged. the part of the documentation you are referring to is when you aren't passing extra arguments.
when you are passing arguments, the way you have presented is exactly the way to do it.
edit the exception would be if the arguments are somehow constants (i can't think of a case when they would be, just flagging).
this pattern (the one you presented) is important especially for handlers within loops, where each item needs to call a callback/handler, but forward on an id or key or index.
score:1
the alternative is to use .bind
but it's not recommended because a new function is created upon each render()
call.
updateprogress(arg, event) {
console.log(arg, event); // prints: 1 proxy {dispatchconfig: object ...
}
render() {
return
...
<button onclick={this.updateprogress.bind(this, 1)}>increase</button>
}
Source: stackoverflow.com
Related Query
- Pass event args and event object to event handler without arrow function in ReactJS
- Pass prop value as a parameter in an arrow function in an event handler onClick() in React
- pass event and object to function in react
- React Hooks: accessing state across functions without changing event handler function references
- React Component passes Proxy object instead of Event object to the handler function
- Advantages and Understanding of using Currying Function pattern in onClick Event handler in React
- React event handler function working without the use of bind()
- React - Arrow function vs bind() and event with argument
- How to pass event and other arguments inside an arrow function in ReactJs
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- passing argument to function in react without using arrow function in onClick handler
- react - onclick using event without using arrow function
- Extract string from object and pass it to parent function - Typescript , React
- How to pass an onClick event handler a function that takes a parameter and still bind the function to the component's "this" context?
- How to pass a function with arguments as prop in React without creating an arrow function
- Event handling in react: in which cases do we need to use arrow function on event, and when do we just need to pass class method(function)?
- How to pass the event object to a React event handler function?
- React and TypeScript: How to pass Arguments to Event handler of type: MouseEventHandler
- How to make event handler function mock in react and react testing library
- Get object data and target element from onClick event in react js
- react link vs a tag and arrow function
- React.js: the most efficient way to pass a parameter to an event handler without bind() in a component
- How to unit test a react event handler that contains history.push using Jest and Enzyme?
- How to pass an event handler to a child component in React
- React - How to Pass an Argument to an Event Handler
- Is it possible to type a React function component with TypeScript without using arrow functions?
- Access props and state of current component in React JS within an event handler
- Dynamic object key with Typescript in React event handler
- Why I'm able to use this.state without having to bind or use arrow function React
- How to pass arguments to callback in React + Typescript without new function creation?
More Query from same tag
- Move react component to another component
- onClick handler of react checkbox gives error
- react redux split reducer change prev state
- Characters are overlapping in React form
- Call several dependant functions before render
- RactiveJS and JSX
- How to fetch multiple google fonts
- How Can I integrate my Login Component in Navbar?(Code Attached)
- How to display an Error message when logging in fails in Reactjs
- Type 'Element' is not assignable to type 'string'.ts(2322)
- hosting gh-pages on custom domain, white empty page
- Can you, or should you use localStorage in Redux's initial state?
- readOnly MobileDatePicker doesn't work in MUI v5
- React event triggers visible page refresh when re rendering
- redux sagas are blocking the browser
- How can I add gap between bars of each series in React Apexcharts?
- replacing componentDidUpdate with useEffect
- How to get fetch api results in execution order with async/await?
- How to append div to the body on a button click?
- Display progress upload for multiple files with Axios and React
- Insert a new instance of a component onClick outside DOM hierarchy of the parent component
- Is there a simple CRUD example app using react.js and firebase?
- How to map React component under correct category
- React: How to pass data from getInitialProps to Context API?
- Creating dynamic table, Object.keys not allowing to return rows of table react
- Routing doesn't read id
- What difference between direct argument and callback in setState?
- React | TypeScript - Context of "this" onClick event
- How to change the dropdown value in Print dialogue box?
- Cannot find module ReactToPrint