Overview

Given that we haven't yet covered state management or event handling, this challenge will focus on enhancing the Profile Card by adding more static features using components and props. You will practice further component composition and deepen your understanding of props to make the Profile Card more detailed and informative.

Challenge Description

Add additional static information components to your Profile Card, such as a contact information section or a list of interests. This will allow you to practice using props more extensively and to explore more complex component structures.

Goals

• Practice creating and using multiple components.

• Enhance the Profile Card by integrating new components that accept props.

• Explore more advanced component composition techniques.

Instructions

Step 1. Develop 2 new components:

• ContactInfo Component: This component displays the user's email and phone number.

• Interest Component: This component lists the user’s interest. For simplicity, each user will have only one interest.

Step 2. Add Components to the Profile Card

Modify your ProfileCard component to include these new components. Pass the necessary props from ProfileCard to these subcomponents.

Step 3. Update Data

Ensure that App.js includes sample data for the new props and renders the enhanced ProfileCard.

For example

const userData = {
   name: "Jane Doe",
   image: "https://example.com/janedoe.jpg",
   bio: "Web Developer and Cat enthusiast.",
   email: "jane.doe@example.com",
   phone: "123-456-7890",
   interest: “Coding”
 };

NOTE:

Typically, we would use import and export statements to organize components into separate files, enhancing the structure and maintainability of our code. However, due to the limitations of our online code editor, we need to place all components within a single file. This approach helps ensure compatibility and functionality within this specific development environment.