The event object

Learn to use the event object that comes to the handler.

Event object

When React calls the handler it passes an event object. You usually take it as e or event: function handleChange(e) { ... }.

The event object carries info about what happened. The most used field is e.target.value: the current text in an input.

This object resembles the browser's native event but React wraps it; behavior stays consistent.

Listening to an input

To listen to an input you use onChange. Each keystroke calls the handler and e.target.value gives the current text.

This is the basis of controlled inputs; we will join it with state in the next group. For now we get to know the event object.

If you do not need the event, you can skip the parameter; React still passes it but you ignore it.

Exercise Input listener

Complete the skeleton. Write a TypeWatcher component; define a function handleChange taking parameter e (body can be empty). Return <input onChange={handleChange} />. Export it.

Show example solution

function TypeWatcher() {
  function handleChange(e) {}
  return <input onChange={handleChange} />;
}

export default TypeWatcher;

Test yourself

Which property gives the current input text?
```
target is the element where the event happened; value holds the text.
```
- e.type
- e.name
- e.key
- e.target.value
Show answer

e.target.value — e.target.value gives the current value.

The event object: fill in the missing part

function handleChange(e) { console.log(e.____); }

Show answer

function handleChange(e) { console.log(e.target.value); }

The event object: match the terms

e.target

Element of event
e.target.value

Current text
e.key

Pressed key
e.preventDefault()

Stop default

Next lesson: Form events

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies