React Events

React has some built in props which are 'handlers' for when the user does something on your webpage.

Here is how to log when a button is clicked:

<button onClick={() => console.log('click')}>Click me</button>

In this example we pass a function () => console.log('click') to the onClick= prop. When the button is clicked, this function gets called.

onClick is supported on all built in html elements e.g: <div>, <p> etc.

Other events

React has a full reference of all the events it supports.

Here are some of the most frequently used:

<div onKeyDown={(event) => console.log('keyboard button pressed: ', event.keyCode)} />

<input onKeyPress={(event) => console.log('keyboard button pressed: ', event.keyCode)} />

<p onKeyUp={(event) => console.log('keyboard button pressed: ', event.keyCode)} />

<input onChange={(event) => console.log('input text: ', event.target.value)} />

<form onSubmit={() => console.log('Form submitted')} />