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

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

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

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

Hint

Simply add export default App; at the end.

Practice

1. What is the main benefit of creating reusable UI components in React?

easy

A. They automatically fix bugs

B. They make the app run faster

C. They save time and keep the app consistent

D. They replace the need for CSS styling

Solution

1. Step 1: Understand the purpose of reusable components

   Reusable components are designed to be used multiple times, reducing repeated code.

2. Step 2: Identify the main benefit

   Using reusable components saves development time and keeps the app's look and behavior consistent.

3. Final Answer:

   They save time and keep the app consistent -> Option C

4. Quick Check:

   Reusable components = save time + consistency [OK]

Hint: Reusable means use again to save time and stay consistent [OK]

Common Mistakes:

• Thinking reusable components speed up app runtime
• Believing they fix bugs automatically
• Confusing styling with component reuse

2. Which of the following is the correct way to pass a prop named title with value "Hello" to a React component Card?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall JSX prop syntax

   Props are passed as attributes with name=value pairs, using quotes for strings.

2. Step 2: Check each option

   uses correct JSX syntax: title="Hello". Others have syntax errors.

3. Final Answer:

   <Card title="Hello" /> -> Option A

4. Quick Check:

   Props in JSX use name="value" [OK]

Hint: Props look like HTML attributes with quotes for strings [OK]

Common Mistakes:

• Using curly braces without variable (Option B)
• Adding extra quotes around prop name (Option C)
• Using colon instead of equals (Option A)

3. Given this React component:

function Button({ label }) {
  return <button>{label}</button>;
}

// Usage:
<Button label="Click me" />

What will be rendered on the page?

medium

A. label

B. Nothing will render

C. {label}

D. Click me

Solution

1. Step 1: Understand prop usage in the component

   The component receives label as a prop and inserts it inside the button element.

2. Step 2: Check the usage

   The component is used with label="Click me", so the button shows "Click me" text.

3. Final Answer:

   <button>Click me</button> -> Option D

4. Quick Check:

   Prop label = "Click me" shown inside button [OK]

Hint: Props passed show as content inside component tags [OK]

Common Mistakes:

• Thinking the literal word 'label' appears
• Confusing JSX expression with string
• Assuming component renders nothing without explicit return

4. What is wrong with this reusable React component code?

function Alert(props) {
  return <div>{message}</div>;
}

// Usage:
<Alert message="Warning!" />

medium

A. The variable 'message' is not defined inside the component

B. The component does not receive props correctly

C. The usage of the component is incorrect

D. The component should return a button instead of a div

Solution

1. Step 1: Check how props are used inside the component

   The component uses {message} but does not extract it from props.

2. Step 2: Identify the error

   Since message is not defined or extracted, this causes a reference error.

3. Final Answer:

   The variable 'message' is not defined inside the component -> Option A

4. Quick Check:

   Props must be accessed via props or destructuring [OK]

Hint: Always get props from function parameter before use [OK]

Common Mistakes:

• Using prop names directly without props or destructuring
• Assuming usage syntax is wrong
• Thinking component must return button

5. You want to create a reusable Input component that can show a label and accept user input. Which approach correctly allows customizing the label text and input placeholder using props?

hard

A. function Input() {
return (
<label>
label
<input placeholder="placeholder" />
</label>
);
}

B. function Input({ label, placeholder }) {
return (
<label>
{label}
<input placeholder={placeholder} />
</label>
);
}

C. function Input(props) {
return (
<label>
props.label
<input placeholder="props.placeholder" />
</label>
);
}

D. function Input({ label, placeholder }) {
return (
<label>
<input placeholder={label} />
{placeholder}
</label>
);
}

Solution

1. Step 1: Check prop usage for label and placeholder

   Props should be destructured and used inside JSX expressions with curly braces.

2. Step 2: Verify correct placement of label and placeholder

   function Input({ label, placeholder }) { return ( <label> {label} <input placeholder={placeholder} /> </label> ); } correctly places label text and uses placeholder prop inside input element.

3. Final Answer:

   function Input({ label, placeholder }) { return ( <label> {label} <input placeholder={placeholder} /> </label> ); } -> Option B

4. Quick Check:

   Destructure props and use inside JSX with curly braces [OK]

Hint: Destructure props and use inside JSX with curly braces [OK]

Common Mistakes:

• Using prop names as plain text instead of expressions
• Putting placeholder text in wrong prop
• Mixing label and placeholder positions