Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 5 · 5 / 9Showing things conditionally
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Showing things conditionally
01 / 09Overview

Showing things conditionally

You'll learn to show different things on screen depending on a condition, with if, ? : and &&.

Why it mattersEvery real screen changes with the data, like a loading message, an empty list or a logged-in user.
about 60 min·needs: State with useState, Making decisions with if
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Conditional renderingreact.dev · official docs · 20 min · English
MMamun's noteRead it all and try the packing list example. Pay attention to the pitfall box about 0 and &&.
Video
Full React tutorial #18: conditional loading messageYouTube · Net Ninja · 4 min · English
MMamun's noteWatch all four minutes for the && part: {isPending && <div>Loading...</div>}. The data fetching around it comes later in this phase; don't worry about it now.
DocsOptional
Conditional (ternary) operatorMDN Web Docs · reference · 5 min · English
MMamun's noteRead the first example only, if the ? and : still feel strange. It is the same operator outside React.
03 / 09

Explanation

You want your to-do app to say "No tasks yet." when the list is empty, and show the list when it is not. Showing different JSX depending on a condition is called conditional rendering. It is plain JavaScript, used in three ways.

1. if with an early return. Good when the whole screen changes.

if (tasks.length === 0) {
  return <p>No tasks yet.</p>;
}
return <TaskList tasks={tasks} />;

2. The ternary condition ? a : b. Good inside JSX when you want one thing or another. Read ? as "then" and : as "else": {isOnline ? <p>Online</p> : <p>Offline</p>}.

3. &&. Good when you want something or nothing: {hasDue && <p>Fee due</p>}. If hasDue is false, React shows nothing. You can also return null to show nothing at all.

People often put a number before &&. With {items.length && <p>...</p>} and an empty list, items.length is 0. && gives back that 0, and React shows a 0 on the screen. Write a real true/false check instead: {items.length > 0 && ...}.

When you read JSX, find each ? and &&, and say out loud: "if this, show that".

Words to recognise
conditional renderingternary? :&&null
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

App.jsx4 notes
1function Inbox({ messages, isOnline }) {
if (!isOnline) {
Mentor note · line 2
An early return. When offline, the function stops here and nothing below runs.
return <p>You are offline.</p>;
4 }
5
6 return (
7 <div>
8 <h2>Inbox</h2>
{messages.length > 0 && <p>You have {messages.length} new messages.</p>}
{messages.length === 0 ? <p>No new messages.</p> : <button>Read all</button>}
11 </div>
12 );
13}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1function Cart({ items }) {
2  return (
3    <div>
4      <h2>Cart</h2>
5      {items.length && <p>{items.length} items</p>}
6    </div>
7  );
8}
9 
10// used as <Cart items={[]} />
What appears on screen?
DrillFind the bug2 / 2
Your to-do screen calls statusMessage to choose what to show. While loading, it must say "Loading...". If loading failed, it must say "Something went wrong.". Only when it has finished with no error and no tasks should it say "No tasks yet.". Fix the order of the checks so all four pass.
1
2
3
4
5
6
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3With isPaid = false, what does {isPaid ? <p>Paid</p> : <p>Due</p>} show?
  2. 2 / 3With hasDue = false, what does {hasDue && <p>Fee due</p>} show?
  3. 3 / 3Which is the safe way to show a list only when it has items?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Showing things conditionally?

09 / 09

Done

You can now
Read a ternary or && inside JSX and say what appears for a given value, including the 0 trap.
Next: Lists and keys Back to Phase 5
On this page
  1. 01Showing things conditionally
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Showing things conditionally
01 / 09Overview

Showing things conditionally

You'll learn to show different things on screen depending on a condition, with if, ? : and &&.

Why it mattersEvery real screen changes with the data, like a loading message, an empty list or a logged-in user.
about 60 min·needs: State with useState, Making decisions with if
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Conditional renderingreact.dev · official docs · 20 min · English
MMamun's noteRead it all and try the packing list example. Pay attention to the pitfall box about 0 and &&.
Video
Full React tutorial #18: conditional loading messageYouTube · Net Ninja · 4 min · English
MMamun's noteWatch all four minutes for the && part: {isPending && <div>Loading...</div>}. The data fetching around it comes later in this phase; don't worry about it now.
DocsOptional
Conditional (ternary) operatorMDN Web Docs · reference · 5 min · English
MMamun's noteRead the first example only, if the ? and : still feel strange. It is the same operator outside React.
03 / 09

Explanation

You want your to-do app to say "No tasks yet." when the list is empty, and show the list when it is not. Showing different JSX depending on a condition is called conditional rendering. It is plain JavaScript, used in three ways.

1. if with an early return. Good when the whole screen changes.

if (tasks.length === 0) {
  return <p>No tasks yet.</p>;
}
return <TaskList tasks={tasks} />;

2. The ternary condition ? a : b. Good inside JSX when you want one thing or another. Read ? as "then" and : as "else": {isOnline ? <p>Online</p> : <p>Offline</p>}.

3. &&. Good when you want something or nothing: {hasDue && <p>Fee due</p>}. If hasDue is false, React shows nothing. You can also return null to show nothing at all.

People often put a number before &&. With {items.length && <p>...</p>} and an empty list, items.length is 0. && gives back that 0, and React shows a 0 on the screen. Write a real true/false check instead: {items.length > 0 && ...}.

When you read JSX, find each ? and &&, and say out loud: "if this, show that".

Words to recognise
conditional renderingternary? :&&null
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

App.jsx4 notes
1function Inbox({ messages, isOnline }) {
if (!isOnline) {
Mentor note · line 2
An early return. When offline, the function stops here and nothing below runs.
return <p>You are offline.</p>;
4 }
5
6 return (
7 <div>
8 <h2>Inbox</h2>
{messages.length > 0 && <p>You have {messages.length} new messages.</p>}
{messages.length === 0 ? <p>No new messages.</p> : <button>Read all</button>}
11 </div>
12 );
13}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1function Cart({ items }) {
2  return (
3    <div>
4      <h2>Cart</h2>
5      {items.length && <p>{items.length} items</p>}
6    </div>
7  );
8}
9 
10// used as <Cart items={[]} />
What appears on screen?
DrillFind the bug2 / 2
Your to-do screen calls statusMessage to choose what to show. While loading, it must say "Loading...". If loading failed, it must say "Something went wrong.". Only when it has finished with no error and no tasks should it say "No tasks yet.". Fix the order of the checks so all four pass.
1
2
3
4
5
6
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3With isPaid = false, what does {isPaid ? <p>Paid</p> : <p>Due</p>} show?
  2. 2 / 3With hasDue = false, what does {hasDue && <p>Fee due</p>} show?
  3. 3 / 3Which is the safe way to show a list only when it has items?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Showing things conditionally?

09 / 09

Done

You can now
Read a ternary or && inside JSX and say what appears for a given value, including the 0 trap.
Next: Lists and keys Back to Phase 5
On this page
  1. 01Showing things conditionally
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want your to-do app to say "No tasks yet." when the list is empty, and show the list when it is not. Showing different JSX depending on a condition is called conditional rendering. It is plain JavaScript, used in three ways.

1. if with an early return. Good when the whole screen changes.

if (tasks.length === 0) {
  return <p>No tasks yet.</p>;
}
return <TaskList tasks={tasks} />;

2. The ternary condition ? a : b. Good inside JSX when you want one thing or another. Read ? as "then" and : as "else": {isOnline ? <p>Online</p> : <p>Offline</p>}.

3. &&. Good when you want something or nothing: {hasDue && <p>Fee due</p>}. If hasDue is false, React shows nothing. You can also return null to show nothing at all.

People often put a number before &&. With {items.length && <p>...</p>} and an empty list, items.length is 0. && gives back that 0, and React shows a 0 on the screen. Write a real true/false check instead: {items.length > 0 && ...}.

When you read JSX, find each ? and &&, and say out loud: "if this, show that".

Words to recognise
conditional renderingternary? :&&null

You want your to-do app to say "No tasks yet." when the list is empty, and show the list when it is not. Showing different JSX depending on a condition is called conditional rendering. It is plain JavaScript, used in three ways.

1. if with an early return. Good when the whole screen changes.

if (tasks.length === 0) {
  return <p>No tasks yet.</p>;
}
return <TaskList tasks={tasks} />;

2. The ternary condition ? a : b. Good inside JSX when you want one thing or another. Read ? as "then" and : as "else": {isOnline ? <p>Online</p> : <p>Offline</p>}.

3. &&. Good when you want something or nothing: {hasDue && <p>Fee due</p>}. If hasDue is false, React shows nothing. You can also return null to show nothing at all.

People often put a number before &&. With {items.length && <p>...</p>} and an empty list, items.length is 0. && gives back that 0, and React shows a 0 on the screen. Write a real true/false check instead: {items.length > 0 && ...}.

When you read JSX, find each ? and &&, and say out loud: "if this, show that".

Words to recognise
conditional renderingternary? :&&null