Reusable UI components in React - Mini Project: Build & Apply

Reusable UI components

📖 Scenario: You are building a simple React app that shows user profiles. Each profile has a name and an age. You want to create a reusable UI component to display each user's info nicely.

🎯 Goal: Create a reusable React component called UserCard that takes name and age as props and displays them. Then use this component to show three different users in your app.

📋 What You'll Learn

Create a React functional component named UserCard that accepts name and age props.

Display the name and age inside the UserCard component.

Create a list of three users with exact names and ages.

Render the UserCard component for each user in the list.

💡 Why This Matters

🌍 Real World

Reusable UI components help you build consistent and maintainable user interfaces by reusing code for similar parts of your app.

💼 Career

Knowing how to create and use reusable components is a key skill for React developers and front-end engineers working on scalable web apps.

1

Create the users data array

Create a constant array called users with these exact objects: { name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }, and { name: 'Charlie', age: 35 }.

React

// Create the users array with the exact objects
// Your code here

Need a hint?

Use const users = [ ... ] with three objects inside.

2

Create the UserCard component

Create a React functional component called UserCard that accepts props with name and age. Return a div containing two paragraphs: one showing Name: {name} and the other showing Age: {age}.

React

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

// Create UserCard component here
// Your code here

Need a hint?

Use function UserCard({ name, age }) { return ( ... ) } with JSX inside.

3

Render UserCard components for each user

Inside a React functional component called App, use users.map with (user, index) to render a UserCard for each user. Pass name and age as props. Use key={index} on each UserCard.

React

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

function UserCard({ name, age }) {
  return (
    
      Name: {name}
      Age: {age}
    
  );
}

// Create App component and render UserCard for each user
// Your code here

Need a hint?

Use function App() { return ( ... ) } and inside return use users.map to create UserCard components.

4

Export the App component

Add the line export default App; at the end of the file to export the App component.

React

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

function UserCard({ name, age }) {
  return (
    
      Name: {name}
      Age: {age}
    
  );
}

function App() {
  return (
    
      {users.map((user, index) => (
        
      ))}
    
  );
}

// Export the App component
// Your code here

Need a hint?

Simply add export default App; at the end.