Summary - Conditional rendering

Write a banner that shows a different heading for logged-in and guest users.

Summary - Conditional rendering

In this group you learned conditional rendering, the ternary operator, the logical AND pattern, and early return. Now it's time to combine them.

Use ternary for two options, && for one-sided showing, and early return for edge cases. These three cover most conditional rendering needs.

In the next step you'll write a banner that shows a different heading for logged-in and guest users.

Exercise Banner two states

Complete the skeleton. Write a component called Banner that takes ({ '{ isLoggedIn }' }) as parameter. If isLoggedIn is true, return <h1>Welcome</h1>; otherwise <h1>Please log in</h1> (with ternary). Don't forget to export.

Show example solution

function Banner({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome</h1> : <h1>Please log in</h1>;
}

export default Banner;

Test yourself

Which is best for two options?
- Ternary
- &&
- Early return
- if statement
Show answer

Ternary — Ternary is ideal for two options.
Match the conditional render methods

Ternary

Two options
&&

One-sided
Early return

Edge case
null

Not rendered

Next lesson: What is list rendering?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies