React passing parameter via onclick event using ES6 syntax

by

Remember that in onClick={ ... }, the ... is a JavaScript expression. So

... onClick={this.handleRemove(id)}

is the same as

var val = this.handleRemove(id);
... onClick={val}

In other words, you call this.handleRemove(id) immediately, and pass that value to onClick, which isn’t what you want.

Instead, you want to create a new function with one of the arguments already prefilled; essentially, you want the following:

var newFn = function() {
  var args = Array.prototype.slice.call(arguments);

  // args[0] contains the event object
  this.handleRemove.apply(this, [id].concat(args));
}
... onClick={newFn}

There is a way to express this in ES5 JavaScript: Function.prototype.bind.

... onClick={this.handleRemove.bind(this, id)}

If you use React.createClass, React automatically binds this for you on instance methods, and it may complain unless you change it to this.handleRemove.bind(null, id).

You can also simply define the function inline; this is made shorter with arrow functions if your environment or transpiler supports them:

... onClick={() => this.handleRemove(id)}

If you need access to the event, you can just pass it along:

... onClick={(evt) => this.handleRemove(id, evt)}

More Related Contents:

  1. Why calling react setState method doesn’t mutate the state immediately?
  2. Dynamically import images from a directory using webpack
  3. How to pass params with history.push/Link/Redirect in react-router v4?
  4. How to get history on react-router v4?
  5. How to pass params into link using React router v6?
  6. React Router v4 – How to get current route?
  7. Warning: Each child in a list should have a unique “key” prop
  8. React: Expected an assignment or function call and instead saw an expression
  9. How to start search only when user stops typing?
  10. Is using async componentDidMount() good?
  11. How to use switch statement inside a React component?
  12. How can I set a cookie in react?
  13. Installing create-react-app gives npm ERR! shasum check failed and npm ERR! Unexpected end of JSON input while parsing near ‘…mojOzGIEI2rg0m24Yb5Oq’
  14. How to sync props to state using React hooks : setState()
  15. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  16. Requires Babel “7.0.0-0” but was loaded with “6.26.3”
  17. ReactJs CreateClass is not a function
  18. webpack can’t find module if file named jsx
  19. How should I configure create-react-app to serve app from subdirectory?
  20. What’s the difference between useCallback and useMemo in practice?
  21. React: useState or useRef?
  22. react routing is able to handle different url path but tomcat returns 404 not available resources
  23. Get cookie with react
  24. How to dynamically import non-React client side libraries in Next.js?
  25. React vs ReactDOM?
  26. How do I type this ‘as’ JSX attribute in TypeScript?
  27. this.setState is undefined
  28. React stateless component this.refs..value?
  29. React: Show loading spinner while images load
  30. Media queries in Material UI components

Leave a Comment