Lists, Keys और Conditional Rendering

const subjects = ['Maths', 'Science', 'English', 'Computer']

export default function Page() {
  return (
    <ul>
      {subjects.map((s) => (
        <li key={s}>{s}</li>
      ))}
    </ul>
  )
}

const courses = [
  { id: 1, title: 'C Programming', fee: 2499, level: 'Beginner' },
  { id: 2, title: 'Next.js', fee: 4499, level: 'Intermediate' },
  { id: 3, title: 'Python + AI', fee: 3499, level: 'Beginner' },
]

export default function CourseList() {
  return (
    <div className="grid">
      {courses.map((c) => (
        <article key={c.id} className="card">
          <h3>{c.title}</h3>
          <p>₹{c.fee.toLocaleString('en-IN')} · {c.level}</p>
        </article>
      ))}
    </div>
  )
}

const beginner = courses
  .filter((c) => c.level === 'Beginner')   // keep only beginner courses
  .sort((a, b) => a.fee - b.fee)            // cheapest first

const total = courses.reduce((sum, c) => sum + c.fee, 0)

<p>{beginner.length} beginner courses · Total fees ₹{total}</p>
{beginner.map((c) => <p key={c.id}>{c.title}</p>)}

function Status({ isLoggedIn, cartCount, role, user }) {
  // 1. Early return
  if (!user) return <p>Loading…</p>

  return (
    <div>
      {/* 2. Ternary: one or the other */}
      {isLoggedIn ? <button>Logout</button> : <button>Login</button>}

      {/* 3. && : show only when true */}
      {cartCount > 0 && <span className="badge">{cartCount} in cart</span>}

      {/* 4. Variable chosen before JSX */}
      {role === 'admin' ? <a href="/admin">Admin panel</a> : null}
    </div>
  )
}

{posts.length === 0 ? (
  <p className="empty">No articles yet. Check back soon! ✍️</p>
) : (
  posts.map((p) => <PostCard key={p.slug} post={p} />)
)}

const students = [
  { roll: 1, name: 'Riya', marks: 91 },
  { roll: 2, name: 'Aman', marks: 58 },
  { roll: 3, name: 'Sara', marks: 32 },
]

const grade = (m) => (m >= 90 ? 'A+' : m >= 60 ? 'A' : m >= 33 ? 'B' : 'Fail')

export default function MarksTable() {
  return (
    <table>
      <thead><tr><th>Roll</th><th>Name</th><th>Marks</th><th>Grade</th></tr></thead>
      <tbody>
        {students.map((s) => (
          <tr key={s.roll} style={{ color: s.marks < 33 ? 'crimson' : 'inherit' }}>
            <td>{s.roll}</td><td>{s.name}</td><td>{s.marks}</td><td>{grade(s.marks)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}