Common List Patterns

function CourseList({ courses }) {
  // Pattern 1: Early return for empty state
  if (courses.length === 0) {
    return (
      <div className="empty-state">
        <p>📚 No courses yet. Create your first course!</p>
      </div>
    );
  }

  // Pattern 2: Inline ternary in the list render
  return (
    <div>
      {courses.length === 0 ? (
        <p>No courses found.</p>
      ) : (
        <ul>
          {courses.map((c) => <li key={c.id}>{c.title}</li>)}
        </ul>
      )}
    </div>
  );
}

import { useState } from 'react';

function PaginatedCourses({ courses }) {
  const PAGE_SIZE  = 5;
  const [page, setPage] = useState(1);

  const totalPages = Math.ceil(courses.length / PAGE_SIZE);

  // Slice the correct page of items
  const paginated = courses.slice(
    (page - 1) * PAGE_SIZE,
    page * PAGE_SIZE
  );

  return (
    <div>
      <ul>
        {paginated.map((c) => (
          <li key={c.id}>{c.title}</li>
        ))}
      </ul>

      {/* Pagination controls */}
      <div>
        <button
          onClick={() => setPage((p) => p - 1)}
          disabled={page === 1}
        >← Prev</button>

        {Array.from({ length: totalPages }, (_, i) => (
          <button
            key={i + 1}
            onClick={() => setPage(i + 1)}
            className={page === i + 1 ? 'active' : ''}
          >
            {i + 1}
          </button>
        ))}

        <button
          onClick={() => setPage((p) => p + 1)}
          disabled={page === totalPages}
        >Next →</button>
      </div>
    </div>
  );
}

function GroupedCourses({ courses }) {
  // Group courses by category using reduce()
  const grouped = courses.reduce((acc, course) => {
    const { category } = course;
    if (!acc[category]) acc[category] = [];
    acc[category].push(course);
    return acc;
  }, {});

  // Object.entries gives [['Frontend', [...]], ['Backend', [...]]]
  return (
    <div>
      {Object.entries(grouped).map(([category, items]) => (
        <section key={category}>
          <h3>{category} ({items.length})</h3>
          <ul>
            {items.map((c) => (
              <li key={c.id}>{c.title}</li>
            ))}
          </ul>
        </section>
      ))}
    </div>
  );
}