score:5
it's a matter of timing.
when you use bind
, the arguments map on to the function you are binding in the order you bind them followed by any that are passed to the new function.
when you use an arrow function, you are explicitly passing them in the order you determine.
your function expects event
to be the first argument, so when you use an arrow you function you pass event, person.id
. however, when you bind you pass person.id
(the first argument) and when the function is called with event
you pass that (as the second argument).
this means you arguments end up the wrong way around.
since you only have person.id
when you call bind
and you don't get event
until later, the only way you can use bind
for this is to change the original function so it accepts the arguments in a different order.
namechangehandler = (personid, event) => {
Source: stackoverflow.com
Related Query
- React - Arrow function vs bind() and event with argument
- Which is the right type for an event passed to the onKeyPressed function in React with MaterialUI and Typescript?
- How to create a generic arrow function with react and typescript
- React loop through object and render div with onClick function which takes argument
- How to pass an event and an argument with bind method in Reactjs
- react link vs a tag and arrow function
- React event handlers with Typescript and JSX
- React passing parameter with arrow function in child component
- React Formik bind the external button click with onSubmit function in <Formik>
- Mock React useRef or a function inside a functional component with enzyme and jest?
- How to achieve re-useable components with React and mouse event propagation?
- TypeError: Object(...) is not a function with React Table and moment.js
- Testing debounced function in React component with Jest and Enzyme
- _this.store.getState is not a function when testing react component with enzyme and mocha
- With React, how to bind to the user's clipboard paste event and parse data?
- Sync queryParameters with Redux state and react router for function components
- React this.setState With Arrow Function Causes Error In Console
- Is it possible to type a React function component with TypeScript without using arrow functions?
- React bind and keep access to event object?
- How to test with jest and typescript with types a basic react function component
- Why I'm able to use this.state without having to bind or use arrow function React
- Advantages and Understanding of using Currying Function pattern in onClick Event handler in React
- Remove Event Handler using Abort Signal with Typescript and React
- How does placing an event handler in an anonymous function in React fix bind issues?
- React expose component function and getting data with ComponentDidMount
- Component not mounted when setState called in arrow function in React with ES2016
- map function in react with arrow function
- Pass event args and event object to event handler without arrow function in ReactJS
- useEffect cleanup function with Firebase and React
- How to pass event and other arguments inside an arrow function in ReactJs
More Query from same tag
- Actions must be plain objects. Trying to dispatch an actions into a redux-form
- How can I indent every second visual row, caused by overflow wrapping, within a responsive div
- React Router - dynamic routing setup
- mobex, @inject only specific part of store
- What is the difference between HOC and lifting state up in ReactJS?
- Ant.design does not detect custom input component in Form.Item React
- React use img onerror
- React state defind as property deep clone returns 'is undefined'
- React fetch new data before render. Problems with componentWillMount
- How can I configure Webpack (or Babel) in order to use sass in a React project?
- this axios api call returns an empty array for the call, but the second one returns a value
- "TypeError: Cannot read property 'name' of undefined" error
- React.js how to extract out a method when two components take in the same parameters?
- Uncaught TypeError: Cannot read property 'contains' of null at HTMLDocument.handler
- Update a prop in a child component after an event in parent component?
- Store and edit data using ReactJS
- How can I sanitize formatted text for any input in React?
- How to access the method of other Function component functionality in different component in ReactJS
- Laravel 5.4 laravel-elixir-webpack-react
- componentDidMount fires twice when using TransitionGroup for animation
- Changing all import statements for MUI v5
- Why does this interval stop ticking in react?
- React JSON mapped data. Trying to pass a setState variable from mapped function will not get the latest state on render
- React Quill causes rerender of <input> ouside of Quill's editor
- Nextjs: Unable to load images from static folder
- TypeError: Cannot read properties of undefined (reading 'setRestaurants')
- How to open a modal dialog based on its item key using Reactjs
- write SVG text from keyboard
- Trying to create a typing effect on reactjs
- Firebase: how to require auth to list all nodes, yet allow anonymous read/write to individual nodes?