How do you pass parameters to event handlers?

There are several ways to pass parameters:

1. Arrow function in JSX:

function ItemList({ items }) {
  const handleClick = (id) => {
    console.log('Clicked item:', id);
  };
  
  return (
    <div>
      {items.map(item => (
        <button key={item.id} onClick={() => handleClick(item.id)}>
          {item.name}
        </button>
      ))}
    </div>
  );
}

2. Bind method:

function ItemList({ items }) {
  const handleClick = (id, event) => {
    console.log('Clicked item:', id);
  };
  
  return (
    <div>
      {items.map(item => (
        <button key={item.id} onClick={handleClick.bind(null, item.id)}>
          {item.name}
        </button>
      ))}
    </div>
  );
}