Events

React events look like HTML, with two differences.

Names are camelCase: onClick, onChange, onSubmit.

The value is a function, not a string of code.

Click

Pass the function. Do not call it. onClick={handleClick} is correct. onClick={handleClick()} would run at render.

Inline arrow when the handler is tiny

If the handler grows past a line or two, name it.

The event object

React gives you a synthetic event. It works like a browser event across browsers.

Prevent the default

Forms reload the page on submit. Stop that if you are handling the submit in React.

Passing extra data

Wrap the handler if you need an id from a list.

Tip: Name handlers handleClick, handleChange, handleSubmit. Future you will find them fast.