Introduction
React State and Events work together to make components interactive. Events detect actions such as button clicks or input changes, while state stores the information that needs to change. For example, clicking a button can increase a counter, change a message, or show and hide content. In this chapter, you will practice how events can update state through 10 solved questions, starting with simple examples and moving toward practical interactions. React js State and Events practice questions with solutions help to understand the concepts.
1. How do State and Events work together in React?
Events detect user actions, while state stores information that can change because of those actions.
For example:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increase = () => {
setCount(count + 1);
};
return (
<div>
<h2>Count: {count}</h2>
<button onClick={increase}>
Increase
</button>
</div>
);
}
export default Counter;
Here:
onClickdetects the button click.increasehandles the event.setCountupdates the state.- React updates the displayed count.
Answer: Events respond to user actions, and state stores and updates the data affected by those actions.
2. How can a button click update State?
A button can call a state setter through the onClick event.
import { useState } from "react";
function App() {
const [message, setMessage] = useState("Hello");
return (
<div>
<h2>{message}</h2>
<button onClick={() => setMessage("Welcome to React")}>
Change Message
</button>
</div>
);
}
export default App;
Initially, the message is:
Hello
After clicking the button:
Welcome to React
Answer: Use an event handler such as onClick to call the state setter and update the state.
3. How do you increase State when a button is clicked?
A common example is a counter.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increase = () => {
setCount(previousCount => previousCount + 1);
};
return (
<div>
<h2>{count}</h2>
<button onClick={increase}>
Increase
</button>
</div>
);
}
export default Counter;
Every click calls:
setCount(previousCount => previousCount + 1);
The value increases by one.
Answer: Connect the button’s onClick event to a function that updates the state.
4. How do you show and hide content using State and Events?
A boolean state can control whether content is displayed.
import { useState } from "react";
function App() {
const [isVisible, setIsVisible] = useState(true);
const toggleVisibility = () => {
setIsVisible(previousValue => !previousValue);
};
return (
<div>
{isVisible && <p>This content is visible.</p>}
<button onClick={toggleVisibility}>
Show / Hide
</button>
</div>
);
}
export default App;
The state starts as:
true
Clicking the button changes it to false, and clicking again changes it back to true.
Answer: Use boolean state with an event handler to control whether content is displayed.
5. How do you update State when an input changes?
The onChange event can update state whenever the user types.
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}
/>
<h2>Hello {name}</h2>
</div>
);
}
export default App;
When the user types "Rahul", the state becomes:
Rahul
The heading then displays:
Hello Rahul
Answer: Use onChange and event.target.value to update state from an input field.
6. How do you use State and Events with a checkbox?
Checkboxes commonly use boolean state.
import { useState } from "react";
function App() {
const [isChecked, setIsChecked] = useState(false);
const handleChange = (event) => {
setIsChecked(event.target.checked);
};
return (
<div>
<label>
<input
type="checkbox"
checked={isChecked}
onChange={handleChange}
/>
I agree
</label>
<p>
Status: {isChecked ? "Checked" : "Not Checked"}
</p>
</div>
);
}
export default App;
The value:
event.target.checked
returns either true or false.
Answer: Use a boolean state value and update it with the checkbox’s checked value.
7. How can one event handler update State using a value?
You can pass a value to an event handler using an arrow function.
import { useState } from "react";
function App() {
const [color, setColor] = useState("Black");
const changeColor = (newColor) => {
setColor(newColor);
};
return (
<div>
<h2>Selected Color: {color}</h2>
<button onClick={() => changeColor("Blue")}>
Blue
</button>
<button onClick={() => changeColor("Red")}>
Red
</button>
<button onClick={() => changeColor("Green")}>
Green
</button>
</div>
);
}
export default App;
The same changeColor function handles all three buttons.
For example:
onClick={() => changeColor("Blue")}
passes "Blue" to the function.
Answer: An arrow function can pass a specific value to an event handler, which can then update state.
8. Why should you use the previous State when the next State depends on it?
When the next state depends on the previous state, use the functional updater form.
For example:
setCount(previousCount => previousCount + 1);
This is preferable to relying on a captured count value when the update is based on the previous state.
Example:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increase = () => {
setCount(previousCount => previousCount + 1);
};
return (
<button onClick={increase}>
Count: {count}
</button>
);
}
export default Counter;
Answer: Use a functional state updater when calculating the next state from the previous state.
9. How do you reset State using an Event?
You can create a reset function and connect it to a button.
import { useState } from "react";
function App() {
const [name, setName] = useState("Rahul");
const resetName = () => {
setName("Rahul");
};
return (
<div>
<h2>{name}</h2>
<button onClick={() => setName("Aman")}>
Change Name
</button>
<button onClick={resetName}>
Reset
</button>
</div>
);
}
export default App;
Clicking Change Name changes the state to "Aman".
Clicking Reset changes it back to "Rahul".
Answer: A reset event handler can call the state setter with the original or desired initial value.
10. Build a practical Like Button using State and Events.
Create a Like button that increases the like count whenever the user clicks it.
import { useState } from "react";
function LikeButton() {
const [likes, setLikes] = useState(0);
const handleLike = () => {
setLikes(previousLikes => previousLikes + 1);
};
return (
<div>
<h2>Likes: {likes}</h2>
<button onClick={handleLike}>
Like
</button>
</div>
);
}
export default LikeButton;
How it works
The initial state is:
const [likes, setLikes] = useState(0);
When the user clicks the button:
onClick={handleLike}
calls the event handler.
The handler then updates the state:
setLikes(previousLikes => previousLikes + 1);
If the current value is 0, the next value becomes 1.
After another click, it becomes 2, and so on.
Answer: State stores the number of likes, while the click event triggers the function that increases the state.
Key Takeaways
- Events and State are commonly used together in React.
- Events detect user actions.
- State stores data that can change because of those actions.
onClickcan update state when a button is clicked.onChangecan update state when an input changes.- Boolean state is useful for show/hide and checkbox interactions.
event.target.valuecan be used to read an input’s value.event.target.checkedcan be used to read a checkbox’s state.- Arrow functions can pass values to event handlers.
- Use the functional updater when the next state depends on the previous state.
- Event handlers can also reset state to a specific value.
FAQs
1. What is the relationship between State and Events in React?
Events detect user actions, while state stores and updates the data affected by those actions.
2. Can an event handler update React State?
Yes. An event handler can call a state setter such as setCount() or setName().
3. Which event is commonly used for button clicks?
The onClick event is commonly used for button clicks.
4. Which event is commonly used for input fields?
The onChange event is commonly used to respond to changes in input fields.
5. How do you get the value entered in an input?
You can use:
event.target.value
inside the event handler.
6. Why use a functional updater for State?
Use it when the next state depends on the previous state:
setCount(previousCount => previousCount + 1);
7. Can Events and State be used to create interactive applications?
Yes. They are fundamental to building interactive features such as counters, forms, toggles, likes, menus, filters, and many other UI interactions.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
