Hackforge Academy

Category: React • Beginner

Published on 14 Feb 2026

Explanation

What Are Lists in React? #white-Lists: 1.render multiple elements 2.Created using .map() #white-Keys: 1.Unique identifier 2.Help React track changes 3.Should be stable & unique 4.Avoid index if list changes

Code Example

Explanation

Basic Example: Rendering a List

Code Example

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

  return (
    <div>
      <h2>Fruit List</h2>
      <ul>
        {fruits.map((fruit) => (
          <li>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Explanation

What Are Keys in React? A key is a special prop: #white-Identify which items 1. changed 2.added 3.removed Optimize re-rendering

Code Example

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

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

Explanation

Using Index as Key Is Not Always Good Using index works only when: List does NOT change order Items are NOT deleted/inserted If list changes dynamically use unique ID.

Code Example

const students [{"name":"asfd"}];
  return (
    <ul>
      {students.map((student) => (
        <li key={student.id}>
          {student.name}
      </li>
      ))}
    </ul>
  );

Explanation

#white-Lists: 1.render multiple elements 2.created using .map() #white-Keys: 1.Unique identifier 2.Help React track changes 3.Should be stable & unique 4.Avoid index if list changes

Code Example

Explanation

Why do we use a key prop in React lists?

Code Example

A) To apply CSS styles
B) To uniquely identify list items
C) To create new components
D) To store state