The event object
- React course
- Beginner
- Lesson 37/84
- 4 min
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.
Practice 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.
Starter code
// Define TypeWatcher hereSample solution
function TypeWatcher() {
function handleChange(e) {}
return <input onChange={handleChange} />;
}
export default TypeWatcher;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 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 Correct answer
Explanation: e.target.value gives the current value.
2 The event object: fill in the missing part
function handleChange(e) { console.log(e.____); }function handleChange(e) { console.log(e.target.value); }Explanation: You logged the current text via e.target.value.
3 The event object: match the terms
| Term | Meaning |
|---|---|
e.target |
Element of event |
e.target.value |
Current text |
e.key |
Pressed key |
e.preventDefault() |
Stop default |