Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Build a Social Media Post Like Button | State and Side Effects
Introduction to React

Challenge: Build a Social Media Post Like Button

Swipe to show menu

Task

Create a simple social media post card with a working like counter using the useState hook.

The component must include:

  1. A state variable called likes. Its initial value must be 120.

  2. A heading (h2 element). Its text content must be Exploring Iceland.

  3. A paragraph (p element). Its text content must be One of the most beautiful trips I've ever had.

  4. Another paragraph (p element). It must display Likes: followed by the current value of likes.

  5. A button (button element). Its text content must be Like Post.

  6. When the button is clicked increase the likes state by 1.

Starter Code

Open the starter project below and complete the missing parts of the component.

Starter code

Solution

You can compare your result with the final solution below.

Solution code

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 2

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Section 3. Chapter 2
some-alt