React Lists & Keys: Array Mapping & Reconciliation Engine

In almost every dynamic web application, you need to render collections of repeating data—such as a list of search results, shopping cart items, or table rows. In React, you transform arrays of data into lists of elements using the standard JavaScript Array.prototype.map() method.

Rendering a Basic List with map()

Here is how to render an array of strings into an unordered HTML list (<ul>):

function CourseList() {
  const courses = [
    { id: 'c1', title: 'Data Structures & Algorithms in C++' },
    { id: 'c2', title: 'React JS & Full Stack Web Dev' },
    { id: 'c3', title: 'Relational Database Management (SQL)' }
  ];

  return (
    <div className="course-box">
      <h3>BCA Semester Syllabus</h3>
      <ul>
        {courses.map(course => (
          <li key={course.id}>
            {course.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

Why Does React Require the "key" Prop?

If you forget the key attribute, React will output a red console warning:

Behind the scenes, React's Virtual DOM reconciliation algorithm matches virtual nodes against real DOM elements. When an item is inserted at the top of a 1,000-item list:

• Without stable keys: React compares item 1 with old item 1, item 2 with old item 2... and re-renders every single element on the page in slow O(n^3) time.
• With unique keys: React instantly sees that keys c1, c2, and c3 just shifted position, and cleanly inserts only the single new DOM node at the top in O(n) linear time.

Why Using Array Index (key={index}) Causes Critical Bugs

Beginners often write courses.map((item, index) => <li key={index}>). While this silences the console warning, it causes severe UI bugs when deleting or sorting items: