React User Profiles List using Props and map()

📌 INTRODUCTION

Displaying lists of users is a very common requirement in modern web applications like:

• Social media apps
• Admin dashboards
• Student portals

In this program, we will:

• Create a User Profile Component
• Pass user data using props
• Render multiple profiles using map()

👉 This is a real-world React concept and very important for projects.

---

📘 PROBLEM STATEMENT

👉 Design a React component to display a list of user profiles, accepting a prop named profiles.

---

💡 CONCEPTS USED

• React Props
• List Rendering (map())
• Component Reusability
• JSX

---

🧠 LOGIC EXPLANATION

1. Create a UserProfile component
2. Pass profile data using props
3. Use map() to render multiple profiles
4. Display name, email, and image

---

💻 PROGRAM CODE

---

Step 1: Create UserProfile Component

function UserProfile({ name, email, image }) {
  return (
    <div style={styles.card}>
      <img src={image} alt={name} style={styles.image} />
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

const styles = {
  card: {
    border: "1px solid #ddd",
    borderRadius: "10px",
    padding: "15px",
    width: "200px",
    textAlign: "center",
    margin: "10px"
  },
  image: {
    width: "80px",
    height: "80px",
    borderRadius: "50%"
  }
};

export default UserProfile;

---

Step 2: Use in App.js

import UserProfile from "./UserProfile";

function App() {
  const profiles = [
    {
      id: 1,
      name: "Kavita",
      email: "kavita@gmail.com",
      image: "https://via.placeholder.com/80"
    },
    {
      id: 2,
      name: "Amit",
      email: "amit@gmail.com",
      image: "https://via.placeholder.com/80"
    }
  ];

  return (
    <div>
      <h1>User Profiles</h1>

      <div style={{ display: "flex" }}>
        {profiles.map(profile => (
          <UserProfile
            key={profile.id}
            name={profile.name}
            email={profile.email}
            image={profile.image}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

---

🖥️ OUTPUT

User Profiles

[Profile Card]   [Profile Card]

Kavita           Amit
kavita@gmail.com amit@gmail.com

---

🔍 STEP-BY-STEP EXPLANATION

• profiles → array of user objects
• map() → loops through profiles
• <UserProfile /> → reusable component
• key={profile.id} → unique identifier

---

⚡ ADVANCED FEATURES

1. Add More Fields

{profile.phone}
{profile.address}

---

2. Add Button

<button>View Profile</button>

---

3. Add Grid Layout

<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }}>

---

🎯 WHY THIS PROGRAM IS IMPORTANT

• Combines props + map()
• Builds real-world UI
• Helps in API data rendering
• Common interview question

---

🌟 REAL-WORLD USE CASE

• Student management systems
• Employee dashboards
• Social media apps
• Contact directories

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is props in React?

👉 Props are used to pass data between components.

---

Q2. Why use map() in React?

👉 To render lists dynamically.

---

Q3. What is key in React?

👉 A unique identifier for list items.

---

Q4. What is reusable component?

👉 A component used multiple times with different data.

---

Q5. Can we pass objects as props?

👉 Yes, objects and arrays can be passed.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Todo Component – Program 12
👉 React Product Card – Program 11
👉 React List Rendering – Program 7

---

📌 CONCLUSION

The User Profiles List demonstrates how React efficiently handles dynamic data and reusable components.

👉 Master this concept to build scalable and dynamic applications.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites