Render elements conditionally using ternary operators (? :) or short-circuit evaluation (&&), and map array lists with unique key props.
⊞Code Example
export default function LessonsList({ lessons }) {
if (!lessons || lessons.length === 0) {
return <p className="text-slate-400">No lessons available yet.</p>;
}
return (
<ul className="space-y-2">
{lessons.map((lesson) => (
<li
key={lesson.id}
className="p-3 bg-slate-900 border border-slate-800 rounded-xl text-slate-200 flex justify-between"
>
<span>{lesson.title}</span>
<span className="text-emerald-400 font-bold">#{lesson.id}</span>
</li>
))}
</ul>
);
}