Conditional Rendering and Lists

Conditional Rendering

Use logical AND and ternaries inside JSX; use early returns for empty or loading states.

{isLoggedIn ? <Dashboard /> : <Login />}
{showMenu && <Menu />}

Rendering Lists

Map arrays to elements and always supply a stable key from your data - never the array index for reorderable lists.

{users.map(u => <li key={u.id}>{u.name}</li>)}

Key Points

• Handle loading, empty and error states first.
• Keys give elements stable identity.
• Missing keys cause lost state and slow renders.