Yashotantra Academy logo
← React Native theorytheory 0/50 · 0%
level 1
Curious · 0 XP
streak
0d
perfect
0
badges
0

100 XP to Apprentice

Fundamentals · easy

18. Conditional rendering and lists

Showing UI based on state and mapping data.

1 min read3 questionsup to 50 XPtopic 18/50

Read in another language

AI translates the explanation and quiz text while preserving code and answer scoring.

Conditional rendering uses plain JS: ternaries for either/or, `&&` for show-or-nothing, and early returns for whole different screens (e.g. a loading screen).

function Screen({ loading, address }: { loading: boolean; address: string | null }) {
  if (loading) return <Text>Loading…</Text>;
  return (
    <View>
      {address ? <Text>{address}</Text> : <Text>Not connected</Text>}
      {address && <Text>Tap to disconnect</Text>}
    </View>
  );
}

Be careful with `&&` and numbers: `{count && <Text>...</Text>}` renders a literal `0` when `count` is 0, so prefer `{count > 0 && ...}`.

How to study this topic

  1. 1. Read the explanation once end to end, skipping the code.
  2. 2. Re-read the code snippets and say out loud what each line does.
  3. 3. Answer the quiz without scrolling back — that is the real check.
  4. 4. Read every explanation, even for the answers you got right.

Scoring

  • · Up to 30 XP from quiz accuracy.
  • · +15 XP for a perfect first attempt.
  • · +5 XP while a 3-day streak is running.
  • · 75% or higher marks the topic complete.

Check your understanding

  1. 1. What does `{0 && <Text>x</Text>}` render?

  2. 2. How do you show a completely different screen while loading?

  3. 3. What operator conditionally renders only when true?

Badges

First light
Pass your first topic
Sharp shooter
3 perfect first-try quizzes
On a roll
Study 3 days in a row
Week warrior
Study 7 days in a row
Grinder
Earn 500 XP
Deep diver
Earn 1500 XP