Show and Hide Details

Easy
Free
#State Management

Build a product page in React where one button shows and hides the product's details, switching its label between "Show details" and "Hide details". You'll practice conditional rendering: keeping one true/false value in useState and using it to decide what the page shows. The starter has the product page, the button and the details list.

Requirements

  • The details list starts hidden, and the button says "Show details".
  • Clicking "Show details" shows the details list and changes the button's label to "Hide details".
  • Clicking "Hide details" hides the details again and changes the label back to "Show details". The button keeps switching back and forth on every click.

React docs

Concepts you'll practice