Guided Notes

Conditional Rendering

Showing different UI with if, &&, the ternary operator, and null.

if and early returns

Slide 1 / 5

Because components are functions, a plain if statement can pick what to return:

function Greeting({ isLoggedIn }) { if (isLoggedIn) { return <h2>Welcome back!</h2>; } return <h2>Please sign in.</h2>; }

Early returns keep components readable when whole chunks of UI differ — for example, a loading or error state:

if (loading) return <p>Loading…</p>; if (error) return <p>Something went wrong.</p>; return <List items={items} />;