Introduction
Event Handling allows React applications to respond to user actions such as clicking a button, typing in an input, submitting a form, or moving the mouse. React uses event handler functions to decide what should happen when an event occurs. Event handling is an important part of creating interactive websites. In this chapter, you will practice React Event Handling through solved questions, starting with simple clicks and moving toward practical user interactions. React js Event Handling Practice Questions with Solutions help to build concepts.
1. What is Event Handling in React?
Event Handling means responding to actions performed by the user.
Common events include:
clickchangesubmitmouseOverkeyDown
For example:
function App() {
const handleClick = () => {
console.log("Button clicked");
};
return (
<button onClick={handleClick}>
Click Me
</button>
);
}
export default App;
When the user clicks the button, the handleClick function runs.
Answer: Event Handling allows React components to respond to user actions.
2. How do you handle a button click in React?
React uses the onClick event handler for button clicks.
function App() {
const handleClick = () => {
alert("Hello React!");
};
return (
<button onClick={handleClick}>
Click Me
</button>
);
}
export default App;
When the button is clicked, handleClick is called.
Notice that we write:
onClick={handleClick}
not:
onClick={handleClick()}
The first version passes the function to React so it can call it when the event occurs.
Answer: Use onClick with an event handler function to handle button clicks.
3. What is the difference between onClick and onclick?
React event names use camelCase.
Correct:
<button onClick={handleClick}>
Click
</button>
Incorrect:
<button onclick={handleClick}>
Click
</button>
In React, event handler names such as onClick, onChange, and onSubmit use camelCase.
Answer: React uses camelCase event names such as onClick, while lowercase onclick is not the standard React event prop.
4. How do you write an inline event handler in React?
You can write a small event handler directly inside JSX using an arrow function.
function App() {
return (
<button onClick={() => alert("Button clicked!")}>
Click Me
</button>
);
}
export default App;
Here:
() => alert("Button clicked!")
is the event handler.
For simple operations, inline handlers can be convenient.
Answer: Use an arrow function directly inside the event prop when the event logic is small.
5. How do you pass a value to an event handler?
Suppose you want to send a student’s name to a function.
function App() {
const showName = (name) => {
alert(name);
};
return (
<button onClick={() => showName("Rahul")}>
Show Name
</button>
);
}
export default App;
The arrow function is used to call showName with the required value:
() => showName("Rahul")
This prevents the function from being called immediately during rendering.
Answer: Use an arrow function when you need to pass additional values to an event handler.
6. What is the event object in React?
React provides an event object to event handlers. It contains information about the event that occurred.
Example:
function App() {
const handleClick = (event) => {
console.log(event);
};
return (
<button onClick={handleClick}>
Click Me
</button>
);
}
export default App;
The event parameter contains information about the click event.
For example, you can access the element that triggered the event using:
event.currentTarget
Answer: The event object provides information about the user interaction and is passed to the event handler by React.
7. How do you handle input changes in React?
The onChange event is commonly used to respond to changes in an input field.
import { useState } from "react";
function App() {
const [name, setName] = useState("");
const handleChange = (event) => {
setName(event.target.value);
};
return (
<div>
<input
type="text"
value={name}
onChange={handleChange}
/>
<p>Hello {name}</p>
</div>
);
}
export default App;
When the user types, onChange runs and updates the state.
The entered value is available through:
event.target.value
Answer: Use onChange to respond to changes in input fields.
8. How do you handle form submission in React?
React forms commonly use the onSubmit event.
function App() {
const handleSubmit = (event) => {
event.preventDefault();
alert("Form submitted!");
};
return (
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
The line:
event.preventDefault();
prevents the browser’s default form submission behavior.
This is useful when React needs to handle the form submission itself.
Answer: Use onSubmit to handle form submissions and event.preventDefault() when you need to prevent the browser’s default submission behavior.
9. How can you use Event Handling with State?
Event handling and state are often used together to create interactive components.
Example:
import { useState } from "react";
function App() {
const [message, setMessage] = useState("Welcome");
const changeMessage = () => {
setMessage("You clicked the button!");
};
return (
<div>
<h2>{message}</h2>
<button onClick={changeMessage}>
Click Me
</button>
</div>
);
}
export default App;
Initially, the component displays:
Welcome
After clicking the button:
You clicked the button!
The event handler calls:
setMessage("You clicked the button!");
which updates the state.
Answer: Event handlers can call state setter functions to update the UI in response to user actions.
10. Build a practical Counter using React Event Handling.
Create a counter with Increase, Decrease, and Reset buttons.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increase = () => {
setCount(previousCount => previousCount + 1);
};
const decrease = () => {
setCount(previousCount => previousCount - 1);
};
const reset = () => {
setCount(0);
};
return (
<div>
<h2>Count: {count}</h2>
<button onClick={increase}>
Increase
</button>
<button onClick={decrease}>
Decrease
</button>
<button onClick={reset}>
Reset
</button>
</div>
);
}
export default Counter;
Here:
onClick={increase}
runs the increase function when the button is clicked.
Similarly:
onClick={decrease}
handles the decrease action, and:
onClick={reset}
handles the reset action.
The event handlers update the state using setCount.
Answer: React Event Handling connects user actions such as button clicks with functions that can update state and change the UI.
Key Takeaways
- Event Handling makes React applications interactive.
- React event names use camelCase, such as
onClickandonChange. onClickis used for click events.onChangeis commonly used with input fields.onSubmitis used to handle form submission.- Event handlers can be defined as separate functions.
- Small event handlers can also be written inline with arrow functions.
- The event object provides information about the event.
- Use
event.target.valueto read an input’s current value. - Use
event.preventDefault()when you need to prevent a form’s default browser behavior. - Event handlers and state are commonly used together to build interactive React applications.
FAQs
1. What is Event Handling in React?
Event Handling is the process of responding to user actions such as clicks, typing, form submissions, and mouse interactions.
2. What is onClick in React?
onClick is a React event prop used to run a function when an element is clicked.
3. Why does React use onClick instead of onclick?
React uses camelCase naming for event props, so the standard React syntax is onClick.
4. What is onChange used for in React?
onChange is commonly used to detect changes in form elements such as text inputs, select boxes, and checkboxes.
5. What is the event object in React?
The event object contains information about the event that occurred and is passed to the event handler.
6. Why is event.preventDefault() used?
It prevents the browser’s default action for an event. It is commonly used when handling form submissions in React.
7. Can Event Handling update React State?
Yes. Event handlers can call state setter functions such as setCount() or setName() to update state and the UI.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
