Event Handling

HTML event attributes

HTML event attributes are a quick way to add event handlers to HTML elements. While event listeners are recommended, the event attribute more closely represents how React handles events.

<!-- HTML event attribute -->
<button onclick="activateLaser()">
  Activate Laser
</button>

React events

Handling events in React requires adding an event attribute to the React element. However, because the JSX will be converted to JavaScript, the React events are named using camelCase. The handler function is placed in curly braces instead of quotes.

<button onClick={activateLaser}>
  Activate Laser
</button>

Try it yourself on CodePen

Passing arguments

Passing arguments to React event handlers is common practice but must be accomplished from within a function.

<button onClick={(e) => activateLaser('stun')}>
  Stun
</button>

Try it yourself on CodePen