In React, passing parameters to event handlers or callbacks can be achieved using arrow functions or the bind method. Let's go through both methods with detailed code examples:

1. Using Arrow Functions

You can use arrow functions to pass parameters to event handlers directly in the JSX. Here's how you can do it:

import React from 'react';

class MyComponent extends React.Component {
  handleClick = (param) => {
    console.log('Clicked with parameter:', param);
  };

  render() {
    return (
      <button onClick={() => this.handleClick('Hello')}>
        Click me
      </button>
    );
  }
}

export default MyComponent;

In this example

2. Using bind method

Alternatively, you can use the bind method to bind parameters to event handlers. Here's how:

import React from 'react';

class MyComponent extends React.Component {
  handleClick(param) {
    console.log('Clicked with parameter:', param);
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this, 'Hello')}>
        Click me
      </button>
    );
  }
}

export default MyComponent;

In this example

Important Notes

Using arrow functions or bind in the render method can create a new function on each render, which may impact performance. If the event handler is passed to child components, this could result in unnecessary re-renders of those components. Therefore, it's generally recommended to bind event handlers in the constructor or to use arrow function class properties (as shown in the first example) for optimal performance.

Choose the method that best fits your project's requirements and coding style. Both approaches achieve the same result, so it's mainly a matter of personal preference and readability.