User profile

React.js

easy

20 mins

Create a class-based React component called UserProfile that displays a user's name and a button to toggle visibility of their bio.

Requirements

Use a class component.
The component should:
- Display the user's name.
- Display the user's image.
Contains a "Show Bio" / "Hide Bio" button to toggle the bio visibility.
When the button is clicked for the first time:
- The user's bio is displayed below the button.
- The button text changes from "Show Bio" to "Hide Bio".
When the button is clicked again:
- The bio is hidden.
- The button text switches back to "Show Bio".

Data to use

const user = {
  name: 'Jane Doe',
  bio: 'Frontend developer who loves React and coffee ☕️',
  image: 'https://do6gp1uxl3luu.cloudfront.net/question-webp/dummyUser.jpg'
};