React List Rendering using map() Function (with Example)

📌 INTRODUCTION

In React, displaying multiple items dynamically is a common task. The map() function is used to render lists efficiently.

It allows you to:

• Loop through arrays
• Generate UI elements dynamically
• Build reusable components

👉 This concept is widely used in React projects and real-world applications.

---

📘 PROBLEM STATEMENT

👉 Create a program to render a list of items using the map() function in React.

---

💡 CONCEPTS USED

• Array map() method
• JSX rendering
• Keys in React
• Functional Components

---

🧠 LOGIC EXPLANATION

1. Create an array of items
2. Use map() to loop through items
3. Return JSX elements
4. Display the list

---

💻 PROGRAM CODE

Open src/App.js:

function App() {
  const fruits = ["Apple", "Banana", "Mango", "Orange"];

  return (
    <div>
      <h1>Fruit List</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

🖥️ OUTPUT

Fruit List
• Apple
• Banana
• Mango
• Orange

---

🔍 STEP-BY-STEP EXPLANATION

• fruits.map() → loops through array
• (fruit, index) → each item + index
• <li key={index}> → required for React list rendering
• JSX dynamically creates list items

---

⚠️ IMPORTANT: KEY IN REACT

React requires a unique key for each list item.

👉 Why?

• Helps React identify elements
• Improves performance
• Prevents UI bugs

---

⚡ ADVANCED EXAMPLES

1. Rendering Objects

const students = [
  { id: 1, name: "Juhi" },
  { id: 2, name: "Cherry" }
];

<ul>
  {students.map(student => (
    <li key={student.id}>{student.name}</li>
  ))}
</ul>

---

2. Styling List Items

<li key={index} style={{ color: "blue" }}>
  {fruit}
</li>

---

3. Conditional Rendering

{fruits.map((fruit, index) => (
  fruit !== "Mango" && <li key={index}>{fruit}</li>
))}

---

🎯 WHY map() IS IMPORTANT

• Core concept in React
• Used in almost every project
• Helps build dynamic UI
• Essential for API data rendering

---

📚 REAL-WORLD USE CASE

• Displaying products in e-commerce apps
• Showing user lists
• Rendering API data
• Dashboard components

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is map() in JavaScript?

👉 A method used to iterate over arrays and return a new array.

---

Q2. Why is map() used in React?

👉 To render lists dynamically in JSX.

---

Q3. What is a key in React?

👉 A unique identifier for list elements.

---

Q4. Can we use index as key?

👉 Yes, but not recommended for dynamic lists.

---

Q5. Does map() modify original array?

👉 No, it returns a new array.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Hello World – Program 5
👉 React Counter App – Program 6
👉 JavaScript Arrow Function – Program 1

---

📌 CONCLUSION

List rendering using map() is one of the most important skills in React development.

👉 Master this concept to build real-world applications efficiently.

---

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