List Item Components

💻 React

List Item Components

A List Item Component is a dedicated React component responsible for rendering a single item in a list. Instead of writing all the item JSX inline inside .map(), you extract it into its own component, pass the item data as props, and call that component from the map. This follows the Single Responsibility Principle and makes each item independently testable and reusable.

Before & After: Extracting a List Item Component

JSX

// ── Step 1: Define the item component ──────────────────
function CourseCard({ course, onEnroll }) {
  const { id, title, category, level, enrolled, thumbnail } = course;

  return (
    <article className="course-card">
      <img src={thumbnail} alt={title} />
      <div className="card-body">
        <span className="badge">{category}</span>
        <h3>{title}</h3>
        <p>Level: {level} · {enrolled} enrolled</p>
        <button onClick={() => onEnroll(id)}>
          Enroll Now
        </button>
      </div>
    </article>
  );
}

// ── Step 2: Use it cleanly in the list parent ──────────
function CourseGrid({ courses }) {
  const handleEnroll = (courseId) => {
    console.log('Enrolling in course:', courseId);
  };

  return (
    <div className="grid">
      {courses.map((course) => (
        {/* key on the component — NOT inside CourseCard */}
        <CourseCard
          key={course.id}
          course={course}
          onEnroll={handleEnroll}
        />
      ))}
    </div>
  );
}

Benefits of List Item Components: Extracting item components gives you: cleaner parent JSX, easier unit testing of individual items, reuse of the component elsewhere, React.memo optimization (item only re-renders when its own props change), and clear separation of “list logic” from “item display logic”.