Conditional rendering and lists with keys — React (with Hooks, React 19 & Next.js basics)

3. Conditional rendering and lists with keys

Basic★ Must knowLesson 3 of 17

jsx

{isLoading ? <Spinner /> : <OrderTable orders={orders} />}
{error && <p className="error">{error.message}</p>}
{orders.length === 0 && <EmptyState />}            {/* careful: {0 && <X/>} renders "0" — use length > 0 */}

<ul>
  {todos.map(todo => <TodoItem key={todo.id} todo={todo} />)}
</ul>

Keys let React match list items between renders. Use a stable, unique ID from data. Using the array index as key breaks state and animations when items are inserted, removed or reordered (inputs keep the wrong value).