FreeLike Button

Build a React like button. When you press it, the like count goes up by 1 and the new number shows on screen right away. It all happens inside a single component with on-screen state — no server or global state.

A like button is the most basic interaction screen: a click changes a value, and the new value has to show on screen right away. In React, the number on screen and the value your code holds must stay in sync so each click redraws the latest count. What makes the behavior trustworthy is verifying not just one press but several, confirming the on-screen value stays correct.

How do you reflect a click-driven value on screen in React?

You make sure the displayed value and the value your code holds stay in sync, so each click shows the latest number. When that value changes, React re-renders the view with the latest number.

How do I verify like-button behavior?

Check the initial value is shown, that pressing raises the on-screen value by 1, and that it stays correct across several presses.

Does this problem need server persistence?

No. It works inside a single component with only on-screen state. Server persistence, optimistic updates, and debouncing are out of scope.