← Back to React Challenges
ReactBeginner
Build a Shopping Cart Item Counter
Tests fundamental state management, array manipulation, and component rendering.
Problem Statement
Create a React component that displays a list of products. Each product should have a 'Add to Cart' and 'Remove from Cart' button. The header should display the total number of items in the cart.
Real World Scenario:
Every e-commerce site needs a shopping cart. This challenge mimics the basic add/remove logic you would build for an online store.
Input / Output
Input: An array of product objects: `[{ id: 1, name: 'Laptop', price: 999 }, { id: 2, name: 'Mouse', price: 25 }]`
Output: A rendered UI where clicking 'Add' increases the cart count, and clicking 'Remove' decreases it (but never below 0).
Constraints
- Use functional components and Hooks.
- The cart count cannot be negative.
- You cannot use external libraries like Redux or Zustand.
Interactive Playground
Loading...
Console Output
Click "Run Code" to see the output here.