Practice & Assessment
Test your understanding of State and Event Handling
Multiple Choice Questions
5What is the correct way to update state based on its previous value?
What is wrong with `<button onClick={handleClick()}>Submit</button>`?
Why is using array index as a React list key problematic?
When should you lift state up to a parent component?
What does a controlled input mean in React?
Coding Challenges
1Shopping Cart Item Counter
Build a ShoppingCart component. Render a list of at least 3 product items. Each item has a name and a quantity counter (start at 0). Provide + and - buttons per item to increment and decrement quantity. Quantity must not go below 0. Display a total item count (sum of all quantities) at the top. Use useState for all state. No external libraries. Expected output: interactive list with per-item counts and a live total. Estimated time: 25 minutes.
Mini Project
Todo List Application
Build a functional Todo List app. Features: add a new todo via a controlled input + submit button, mark todos as complete (toggle), delete a todo, and filter view by All / Active / Completed. Use useState for all state. Each todo needs a unique id (use Date.now()), text, and completed boolean. Render the filtered list using .map() with correct keys. The count of remaining active todos should update live. No external libraries or routing required.