Premium

React Like Button (Toggle + Counter)

By FrontendAtlas Team · Updated Jan 30, 2026

Build a React Like button that toggles between liked/unliked and updates a count. Clicking should add or subtract one based on current state, and the counter must never drop below zero. This checks controlled state, event handling, and safe updates. Concepts: react, state, event handlers,…

Render a Like button and a like counter.
Clicking toggles between 'Like' and 'Liked'.

What you’ll build / What this tests

This premium react coding focuses on React Like Button (Toggle + Counter). You’ll apply react and state thinking with easy level constraints. The prompt emphasizes Build a React Like button that toggles between liked/unliked and updates a count. Clicking should add….

Learning goals

Translate the prompt into a clear react API signature and return shape.
Apply react, state, event-handlers techniques to implement react like button (toggle + counter).
Handle easy edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in react.

Key decisions to discuss

Define the exact input/output contract before coding.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Render a Like button and a like counter.
Clicking toggles between 'Like' and 'Liked'.
When toggling to liked: increment the counter by 1.
When toggling to unliked: decrement the counter by 1.
The counter must never go below 0.
Update button styling based on liked state.
Initial state: not liked, counter shows an initial value (e.g., 120).
Clicking the button toggles the label and active style.
Counter updates by +1 / -1 depending on toggle direction.
If the counter is 0, unliking should not make it negative.

Mini snippet (usage only)

// Example usage
const input = /* react like button (toggle + counter) input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.