Custom Hooks in React
15 questions · 12 min · Medium
Conditional Rendering in React
Test your knowledge of conditional rendering in React, including if statements, ternary operators, logical AND, conditional components, and rendering based on state and props.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
React Component Lifecycle & useEffect Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Context API in React
15 questions · 12 min · Medium
Components & Props in React Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Lists and Keys in ReactJS Quiz
15 questions · 12 min · Medium
State Management and useState Quiz in ReactJS
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. What is conditional rendering in React?
- A. Rendering different UI based on conditions
- B. Rendering only CSS styles
- C. Rendering components without JSX
- D. Rendering only once when the application starts
Show answer
A. Rendering different UI based on conditions
Conditional rendering allows React components to display different content depending on conditions such as state or props.
-
2. Which JavaScript statement can be used for conditional rendering before returning JSX?
- A. if
- B. switch only
- C. for
- D. while
Show answer
A. if
An if statement can be used to determine what JSX or component should be returned.
-
3. Which operator is commonly used for inline conditional rendering with two possible outcomes?
- A. Ternary operator
- B. Spread operator
- C. Assignment operator
- D. Optional chaining operator
Show answer
A. Ternary operator
The ternary operator uses the form condition ? expressionIfTrue : expressionIfFalse and is commonly used inside JSX.
-
4. Which JSX expression correctly displays 'Welcome' when isLoggedIn is true and 'Please log in' otherwise?
- A. {isLoggedIn ? 'Welcome' : 'Please log in'}
- B. {isLoggedIn && 'Welcome' : 'Please log in'}
- C. {if (isLoggedIn) 'Welcome' else 'Please log in'}
- D. {isLoggedIn ?? 'Welcome' : 'Please log in'}
Show answer
A. {isLoggedIn ? 'Welcome' : 'Please log in'}
The ternary operator is appropriate when one of two different values or UI elements should be rendered.
-
5. Which operator is commonly used to render an element only when a condition is true?
- A. &&
- B. ||=
- C. ===
- D. =>
Show answer
A. &&
The logical AND operator can conditionally render JSX when the expression on its left evaluates to a truthy value.
-
6. What does the following JSX do? {isAdmin && <AdminPanel />}
- A. Always renders AdminPanel
- B. Renders AdminPanel when isAdmin is truthy
- C. Renders AdminPanel only when isAdmin is false
- D. Removes AdminPanel from the application
Show answer
B. Renders AdminPanel when isAdmin is truthy
With logical AND, the right-hand JSX expression is evaluated and rendered when isAdmin is truthy.
-
7. Which approach can be used when a component needs to render completely different JSX based on a condition?
- A. An if statement with different return statements
- B. Only CSS
- C. Only useEffect
- D. Only useMemo
Show answer
A. An if statement with different return statements
An if statement can be used before the main return to return different JSX for different conditions.
-
8. What is the purpose of the nullish coalescing operator (??) when used in JavaScript expressions?
- A. To provide a fallback when a value is null or undefined
- B. To create a React component
- C. To compare two strings only
- D. To render every component twice
Show answer
A. To provide a fallback when a value is null or undefined
The ?? operator returns the right-hand value when the left-hand value is null or undefined.
-
9. Which of the following is valid conditional rendering inside JSX?
- A. {loading ? <Spinner /> : <Content />}
- B. {if (loading) <Spinner />}
- C. {for (loading) <Spinner />}
- D. {switch (loading) <Spinner />}
Show answer
A. {loading ? <Spinner /> : <Content />}
The ternary operator can be used directly inside JSX to choose between two UI elements.
-
10. How can a React component conditionally render nothing?
- A. Return null
- B. Return undefined only
- C. Return false only
- D. Return empty JavaScript code
Show answer
A. Return null
Returning null from a React component means that the component renders no UI.
-
11. Which React data can commonly determine whether a component should render a particular UI element?
- A. State and props
- B. Only CSS
- C. Only HTML attributes
- D. Only component names
Show answer
A. State and props
Components commonly use their state and props as inputs for determining which UI should be rendered.
-
12. What is a potential issue with using {count && <Message />} when count can be 0?
- A. React may render 0
- B. React always renders Message
- C. The application will always crash
- D. The expression is invalid JSX
Show answer
A. React may render 0
Unlike false, null, and undefined, the number 0 can be rendered by React. This can cause an unexpected 0 to appear when using count && JSX.
-
13. Which technique is useful when there are multiple mutually exclusive rendering conditions?
- A. if/else if/else
- B. Only logical AND
- C. Only fragments
- D. Only CSS selectors
Show answer
A. if/else if/else
if/else if/else is useful when several mutually exclusive conditions determine which UI should be rendered.
-
14. What happens when the condition in a ternary expression is truthy?
- A. The expression after ? is selected
- B. The expression after : is selected
- C. Both expressions are always rendered
- D. Neither expression is evaluated
Show answer
A. The expression after ? is selected
In condition ? valueIfTrue : valueIfFalse, the valueIfTrue expression is selected when the condition is truthy.
-
15. Which statement about conditional rendering in React is correct?
- A. React uses normal JavaScript expressions and control flow to determine what UI to render
- B. React requires a special if-render directive
- C. Conditional rendering can only be done with CSS
- D. Conditional rendering is not supported inside components
Show answer
A. React uses normal JavaScript expressions and control flow to determine what UI to render
React relies on JavaScript constructs such as if statements, ternary expressions, and logical operators for conditional rendering.