React js onClick can’t pass value to method

by

Easy Way

Use an arrow function:

return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

This will create a new function that calls handleSort with the right params.

Better Way

Extract it into a sub-component.
The problem with using an arrow function in the render call is it will create a new function every time, which ends up causing unneeded re-renders.

If you create a sub-component, you can pass handler and use props as the arguments, which will then re-render only when the props change (because the handler reference now never changes):

Sub-component

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

Main component

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

Old Easy Way (ES5)

Use .bind to pass the parameter you want, this way you are binding the function with the Component context :

return (
  <th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);

More Related Contents:

  1. Build an HTML table using React from arrays [closed]
  2. “SyntaxError: Unexpected token < in JSON at position 0"
  3. Does React keep the order for state updates?
  4. Setting a backgroundImage With React Inline Styles
  5. Is it safe to store a JWT in localStorage with ReactJS?
  6. How to pass in a react component into another react component to transclude the first component’s content?
  7. ReactJS and images in public folder
  8. Deprecation notice: ReactDOM.render is no longer supported in React 18
  9. In React, what’s the difference between onChange and onInput?
  10. ESLint with React gives `no-unused-vars` errors
  11. Multiple Nested Routes in react-router-dom v4
  12. React JS onClick event handler
  13. How do you pass data when using the navigate function in react router v6
  14. React.createClass vs. ES6 arrow function
  15. Is it an anti-pattern to define a function component inside the render() function?
  16. How to pass state back to parent in React?
  17. In React.js should I make my initial network request in componentWillMount or componentDidMount?
  18. How to avoid extra wrapping in React?
  19. In Firebase when using push() How do I get the unique ID and store in my database [duplicate]
  20. React.js this.props.data.map() is not a function
  21. How to use setState inside callback: ReactJS
  22. ReactJS – Get Height of an element
  23. How to get selected value of a dropdown menu in ReactJS
  24. Why useEffect running twice and how to handle it well in React?
  25. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  26. How to mock React component methods with jest and enzyme
  27. Class based component vs Functional components what is the difference ( Reactjs ) [duplicate]
  28. Deep nested array of objects not rendering
  29. create-react-app is showing all my code in production, how to hide it?
  30. Why would we use useEffect without a dependency array?

Leave a Comment