How would I pass a parameter through onClick without creating an in-line arrow function?

[maralihart]

I'm trying to make a button that passes data that then affects what happens when the button is clicked.

const onClick = useCallback((data: Data) => {
     // do something with data
}, []);

const dataSeries = [...] // an array of data

return (
     { dataSeries.map((i) => {<Button onClick={(e) => onClick(e, i)} /> }
);

This produces the result that I want, but I want to avoid creating an in-line arrow function and just use the useCallback hook. I considered getting the data from the event object, but e: Event doesn't have any way to access the attributes.

How would I pass a parameter through onClick without creating an in-line arrow function? How can I use the FluentUI v9 button and pass information to its onClick including event?

[micahgodbolt]

You can create a handleClick function that expects an event param, and use that as the onClick value.

const handleClick = (e) => ...

<Button onClick={handleClick} />