# Task

Create a reusable `UserCard` component that displays user information using props.
The `UserCard` component must include:

1. A heading (`h2` element). Its text content must display the `name` prop.

2. A paragraph (`p` element). Its text content must display the `job` prop.

The `App` component already renders multiple `UserCard` components with different props.


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

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-02-starter?file=src%2FApp.jsx)



## Solution

You can compare your result with the final solution below.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-02-solution?file=src%2FApp.jsx)

Explore the fundamentals of building user interfaces with React. Focus on components, JSX, data flow, state, and side effects used in everyday React applications.

Explore what React is and how it renders user interfaces. Focus on components, JSX syntax, and displaying elements on the screen.

What is the main purpose of props in React?

Which method is most commonly used to render a list of items in React?

Why is the key prop important when rendering lists?

Dive into passing data between components and controlling UI output. Focus on props, conditional rendering, and rendering lists of data.

Learn how user interactions and external data change the UI over time. Focus on managing state and handling side effects with React hooks.

Explore common ways to style React components. Focus on applying styles using inline styles and external CSS.

Learn how to run a React project and understand its structure. Focus on starting a project with Vite and navigating the project files.

Challenge: Build Reusable User Cards

Task

Starter Code

Solution