React, pass prop as function argument

Question

<div id="board" onClick={(event) => 
                         this.props.boardClicked(event)}>

I would like to pass a second argument trying something like this, but my syntax is off I think:

<div id="board" 
   onClick={(event, {this.props.activeCharacter}) =>
            this.props.boardClicked(event, {this.props.activeCharacter})}>

Answer 1

Simple change would be that because you are using an arrow function it is lexically bound automatically to the react compmponent instance, so you can use this within function. Simply pass as an extra arg from within the function

<div id="board" onClick={(event) => this.props.boardClicked(event, this.props.activeCharacter)}>

Using arrow functions in event handlers in react is a bad idea though because it creates an anonymous function, that will cause this component to unnecessarily always re-render which can hurt performance if component is used a lot

You can overcome that by defining a handler on your class

onBoardClick = (event) => this.props.boardClicked(event, this.props.activeCharacter)

render = () => <div id="board" onClick={this.onBoardClick} />

Now you are passing the same function reference each time so no unnecessary re-renders but same click handler functionality