Conditional rendering

Learn conditional rendering with && and ternary.

Conditional rendering

Sometimes you want to show a component only under a certain condition. This is called conditional rendering. JSX has two common methods for this.

The first is the && operator: {isLoggedIn && <Text>Welcome</Text>}. If the condition is true the right side appears; if false nothing is shown.

The second is the ternary operator: {isLoggedIn ? <Text>Yes</Text> : <Text>No</Text>}. If true the first side appears; if false the second side appears.

Ternary operator

The ternary operator has three parts: condition ? trueValue : falseValue. If the condition is true the first value is returned; otherwise the second value.

It is used inside JSX with curly braces: {count > 0 ? <Text>Full</Text> : <Text>Empty</Text>}. This shows two different outputs in one line.

The ternary is the one-line equivalent of if-else. Since if cannot be used inside braces, ternary is preferred.

Exercise Render with ternary

Define a variable isLoggedIn (const isLoggedIn = true;). The App component should use a ternary inside a <View> for conditional rendering: if true show <Text>Welcome</Text>, if false show <Text>Sign in</Text>.

Show example solution

const isLoggedIn = true;

function App() {
  return (
    <View>
      {isLoggedIn ? <Text>Welcome</Text> : <Text>Sign in</Text>}
    </View>
  );
}

Test yourself

&& operator

{____ && <Text>Welcome</Text>}

Show answer

{isLoggedIn && <Text>Welcome</Text>}

Conditional render symbols

&&

And operator
?

Ternary question
:

Ternary colon
{ }

Embed expression
Which ternary form is correct?
- {isLoggedIn ? <Text>Yes</Text>}
- {isLoggedIn ? <Text>Yes</Text> : <Text>No</Text>}
- {if (isLoggedIn) <Text>Yes</Text>}
- {isLoggedIn <Text>Yes</Text>}
Show answer

{isLoggedIn ? <Text>Yes</Text> : <Text>No</Text>} — The ternary uses ? and : for two values.

Next lesson: Summary - JSX

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies