React js Rendering Lists Practice Questions with Solutions

By /

Introduction

React.js mein Rendering Lists ka use tab hota hai jab humein multiple similar items ko dynamically display karna ho. For example, students, products, users, courses ya menu items ki list. React mein arrays ko usually JavaScript ke map() method ke through JSX elements mein convert kiya jata hai. Is chapter mein hum map(), arrays of objects, reusable components, conditional lists aur dynamic state-based lists ke practical examples solve karenge. React js Rendering Lists practice questions with solutions help to understand the concepts.

1. What is Rendering Lists in React?

Answer:

Rendering Lists ka matlab hai ek array ke multiple items ko React UI mein display karna.

React mein list render karne ke liye commonly JavaScript ka map() method use kiya jata hai.

Example:

function App() {
  const names = ["Rahul", "Aman", "Priya"];

  return (
    <div>
      {names.map((name) => (
        <p key={name}>{name}</p>
      ))}
    </div>
  );
}

export default App;

Output:

Rahul
Aman
Priya

Yahan map() array ke har item ke liye ek <p> element create karta hai.

2. How do you render an array using map() in React?

Answer:

map() array ke har element par ek function run karta hai aur new array return karta hai.

React mein iska use JSX elements create karne ke liye kiya ja sakta hai.

Example:

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

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

export default App;

Explanation:

fruits.map((fruit) => ...)

array ke har fruit ke liye ek <li> create karta hai.

3. How do you render a list of names in React?

Answer:

Names ke array ko map() ke through render kar sakte hain.

Example:

function StudentNames() {
  const students = [
    "Rahul",
    "Priya",
    "Aman",
    "Neha"
  ];

  return (
    <div>
      <h2>Student Names</h2>

      {students.map((student) => (
        <p key={student}>{student}</p>
      ))}
    </div>
  );
}

export default StudentNames;

Yeh component students ke names ko dynamically display karega.

Agar array mein students add ya remove honge, rendered list bhi uske according change ho jayegi.

4. How do you render an array of objects in React?

Answer:

Real-world applications mein data usually objects ke form mein hota hai.

Example:

const students = [
  { id: 1, name: "Rahul", course: "React" },
  { id: 2, name: "Priya", course: "Python" },
  { id: 3, name: "Aman", course: "JavaScript" }
];

Is data ko map() ke through render kar sakte hain.

Example:

function Students() {
  const students = [
    { id: 1, name: "Rahul", course: "React" },
    { id: 2, name: "Priya", course: "Python" },
    { id: 3, name: "Aman", course: "JavaScript" }
  ];

  return (
    <div>
      {students.map((student) => (
        <div key={student.id}>
          <h3>{student.name}</h3>
          <p>Course: {student.course}</p>
        </div>
      ))}
    </div>
  );
}

export default Students;

Yahan student.id, student.name aur student.course object se values retrieve kar rahe hain.

5. How do you display a list of products using map()?

Answer:

Product listing e-commerce applications mein common example hai.

Example:

function Products() {
  const products = [
    { id: 1, name: "Laptop", price: 50000 },
    { id: 2, name: "Keyboard", price: 1500 },
    { id: 3, name: "Mouse", price: 800 }
  ];

  return (
    <div>
      <h2>Products</h2>

      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>Price: ₹{product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default Products;

Output:

Products

Laptop
Price: ₹50000

Keyboard
Price: ₹1500

Mouse
Price: ₹800

Is approach se product data ko manually repeat karne ki zarurat nahi hoti.

6. How do you use a reusable component while rendering a list?

Answer:

Agar list items ka UI complex ho, toh hum ek separate reusable component bana sakte hain.

Example:

function StudentCard({ name, course }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{course}</p>
    </div>
  );
}

function App() {
  const students = [
    { id: 1, name: "Rahul", course: "React.js" },
    { id: 2, name: "Priya", course: "Python" },
    { id: 3, name: "Aman", course: "JavaScript" }
  ];

  return (
    <div>
      {students.map((student) => (
        <StudentCard
          key={student.id}
          name={student.name}
          course={student.course}
        />
      ))}
    </div>
  );
}

export default App;

Yahan:

  • StudentCard reusable component hai.
  • map() har student ke liye StudentCard create karta hai.
  • Student ki information props ke through component mein pass hoti hai.

7. How do you conditionally render a list in React?

Answer:

Kabhi-kabhi humein list ko tabhi display karna hota hai jab data available ho.

Example:

function App() {
  const courses = ["React.js", "Node.js", "Python"];

  return (
    <div>
      <h2>Courses</h2>

      {courses.length > 0 ? (
        courses.map((course) => (
          <p key={course}>{course}</p>
        ))
      ) : (
        <p>No courses available.</p>
      )}
    </div>
  );
}

export default App;

Agar courses array mein items hain, toh courses display honge.

Agar array empty hai, toh:

No courses available.

display hoga.

8. How do you use an index while rendering a list?

Answer:

map() callback mein item ke saath index bhi receive kiya ja sakta hai.

Example:

function App() {
  const courses = ["React.js", "Node.js", "Python"];

  return (
    <ol>
      {courses.map((course, index) => (
        <li key={course}>
          {index + 1}. {course}
        </li>
      ))}
    </ol>
  );
}

export default App;

Output:

1. React.js
2. Node.js
3. Python

Yahan:

(course, index)

mein index current item ka position provide karta hai.

Important: Index ko key ke roop mein use karna har situation mein ideal nahi hota. Agar list reorder, insert ya delete hoti hai, toh stable unique ID ko key ke roop mein prefer karna better hota hai. Keys ko next chapter mein detail mein cover kiya jayega.

9. How do you render a dynamic list from React state?

Answer:

List ko state mein store karke dynamically render kiya ja sakta hai.

Example:

import { useState } from "react";

function App() {
  const [tasks, setTasks] = useState([
    "Learn React",
    "Practice JSX",
    "Build Project"
  ]);

  return (
    <div>
      <h2>My Tasks</h2>

      {tasks.map((task) => (
        <p key={task}>{task}</p>
      ))}
    </div>
  );
}

export default App;

Yahan tasks state mein list stored hai.

Agar setTasks() ke through state update hoti hai, React updated list ko render karega.

For example:

setTasks([
  "Learn React",
  "Practice JSX",
  "Build Project",
  "Learn Node.js"
]);

Toh new task bhi UI mein appear hoga.

10. Build a practical Student List component using map().

Answer:

Ab ek practical Student List component banate hain jisme student ka name, course aur marks display honge.

Example:

function StudentList() {
  const students = [
    {
      id: 1,
      name: "Rahul",
      course: "React.js",
      marks: 85
    },
    {
      id: 2,
      name: "Priya",
      course: "Python",
      marks: 92
    },
    {
      id: 3,
      name: "Aman",
      course: "JavaScript",
      marks: 78
    }
  ];

  return (
    <div>
      <h2>Student List</h2>

      {students.map((student) => (
        <div key={student.id}>
          <h3>{student.name}</h3>
          <p>Course: {student.course}</p>
          <p>Marks: {student.marks}</p>
        </div>
      ))}
    </div>
  );
}

export default StudentList;

Explanation:

students ek array of objects hai.

map() har student ke liye ek UI block create karta hai:

students.map((student) => (
  <div key={student.id}>

Aur student ki information JSX mein display hoti hai:

{student.name}
{student.course}
{student.marks}

Is tarah hum ek scalable student-list UI bana sakte hain jisme data badhne par JSX manually repeat nahi karna padta.

Key Takeaways

  • React mein lists render karne ke liye commonly map() use hota hai.
  • map() array ke har item ke liye JSX create kar sakta hai.
  • Arrays of objects ko bhi easily render kiya ja sakta hai.
  • List items ko unique and stable key dena important hai.
  • Reusable components ke saath lists ko render kiya ja sakta hai.
  • List ko conditionally render kiya ja sakta hai.
  • map() mein item ke saath index bhi access kar sakte hain.
  • State mein stored lists ko dynamically render kiya ja sakta hai.
  • Real-world applications mein product lists, student lists, user lists aur task lists common examples hain.

FAQs

1. What is Rendering Lists in React?

Rendering Lists means displaying multiple similar UI elements from an array of data.

2. Which JavaScript method is commonly used to render lists in React?

The map() method is commonly used to convert array items into JSX elements.

3. Can React render an array of objects?

Yes. React can render data from an array of objects using map().

4. Why is a key used when rendering a list?

A key helps React identify individual list items and efficiently update the list when it changes.

5. Can I use a component inside map()?

Yes. Reusable components can be rendered for every item in an array.

6. Can a list be stored in React state?

Yes. Arrays can be stored in state using useState() and rendered with map().

7. Should I always use the array index as the key?

No. When possible, use a stable unique ID from your data. Index keys can cause problems when list items are reordered, inserted, or removed.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top