Conditional component rendering in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is conditional component rendering in React?

It means showing or hiding parts of the UI based on certain conditions, like a light switch turning on or off depending on if it's dark or bright.

beginner

How do you use the && operator for conditional rendering in React?

You write a condition before &&, and if it's true, React shows the component after it. If false, React shows nothing, like saying 'If hungry && have food, then eat.'

intermediate

What is the difference between using if-else and ternary operator for rendering in React?

If-else is used outside JSX to decide what to render. Ternary is a short way inside JSX to pick between two things, like choosing between tea or coffee in one line.

intermediate

Why should you avoid using if statements directly inside JSX?

Because JSX expects expressions, not statements. Using if inside JSX causes errors. Instead, use ternary or prepare variables before JSX, like planning your outfit before going out.

beginner

What happens if you return null in a React component?

Returning null means React renders nothing for that component, like closing your eyes to ignore something.

Which operator is commonly used in React to render a component only if a condition is true?

A &&

B ||

C ? :

D !

The && operator lets you render something only when the condition before it is true.

What does this JSX code do? {`{isLoggedIn ? : }`}

A Always shows Dashboard

B Shows Dashboard if isLoggedIn is true, else Login

C Shows Login if isLoggedIn is true, else Dashboard

D Shows nothing

The ternary operator picks Dashboard when isLoggedIn is true, otherwise Login.

What will React render if a component returns null?

A An error

B A default component

C The string 'null'

D An empty space (renders nothing)

Returning null means React renders nothing for that component.

Why can't you use an if statement directly inside JSX?

A JSX only accepts expressions, not statements

B If statements are deprecated in React

C JSX only allows functions

D If statements cause syntax errors in JavaScript

JSX expects expressions like ternary or logical operators, not statements like if.

Which is the best way to conditionally render multiple components based on different conditions?

A Use && operator only

B Use nested ternary operators inside JSX

C Use multiple if-else blocks outside JSX

D Use switch-case inside JSX

Using if-else outside JSX helps keep code clear and avoids complex nested ternaries.

Explain how you can show a React component only when a user is logged in.

Think about using a simple true/false check to decide what to show.

Describe why returning null from a React component is useful in conditional rendering.

Imagine closing your eyes to ignore something on screen.