Why might {isOpen && <Modal />} be preferred over {isOpen ? <Modal /> : null}?

Both are functionally identical, but && is cleaner

It produces smaller bundle size

It avoids null checks in React’s reconciliation

What will be the output of the following code? JavaScript { condition1 ? <Component1 /> : condition2 ? <Component2 /> : <DefaultComponent /> }

It will render <Component1 /> if condition1 is true, otherwise <Component2 /> if condition2 is true, otherwise <DefaultComponent />

It will render <Component1 /> if condition1 is true, otherwise <Component2 />.

It will always render <Component1 />

Earn Google Badge

Full Stack Dev CourseExplore

Conditional Rendering In React

Last Updated :

Discuss

Comments

Question 1

Which of the following is the correct way to conditionally render a component in React without rendering false or null to the DOM?

A
{condition && <MyComponent />}
B
{condition ? <MyComponent /> : null}
C
{condition && condition}
D
{condition || <MyComponent />}

Question 2

Why is null often used in conditional rendering?

A
It displays an empty <div>
B
It triggers an error boundary
C
It prevents rendering anything
D
It replaces the component with false

Question 3

Why can {count && {count}} behave unexpectedly when count = 0?

A
It throws an error
B
It still renders 0
C
It doesn’t render anything
D
It duplicates the element

Question 4

Which is the correct way to return multiple elements conditionally?

A
{isValid && (Hello World)}
B
{isValid && [Hello, World]}
C
{isValid && (<>HelloWorld</>)}
D
{isValid ? HelloWorld : null}

Question 5

Why might {isOpen && <Modal />} be preferred over {isOpen ? <Modal /> : null}?

A
It’s more explicit
B
It produces smaller bundle size
C
It avoids null checks in React’s reconciliation
D
Both are functionally identical, but && is cleaner

Question 6

What will be the output of the following code?

JavaScript

{
    condition1 ? <Component1 /> :
    condition2 ? <Component2 /> : 
    <DefaultComponent />
}

A
It will render <Component1 /> if condition1 is true, otherwise <Component2 /> if condition2 is true, otherwise <DefaultComponent />
B
It will render <Component1 /> if condition1 is true, otherwise <Component2 />.
C
It will always render <Component1 />
D
It will never render anything.

Question 7

In the following code, what will be rendered?

JavaScript

const userRole = 'admin';
return userRole === 'admin' && <AdminPanel/>;

A
null
B
undefined
C
<AdminPanel />
D
An error will occur

Question 8

How would you write a conditional rendering to display a "Loading..." message if isLoading is true and show Content if it is false?

A
{isLoading && "Loading..." || "Content"}
B
{isLoading ? "Loading..." : "Content"}
C
{!isLoading && "Loading..." ? "Content" : ""}
D
{isLoading && return "Loading..." : "Content"}

Question 9

What will be the output of the following?

const count = 0;

{count && "Items in cart"}

A
Items in cart
B

0
C
Nothing
D
Error

Question 10

Which React syntax is used to conditionally render elements based on multiple conditions?

JavaScript

{
    condition1 ? <First /> : condition2 ? <Second /> : <Third />
}

A
Switch case rendering
B
Ternary operator
C
&& operator
D
if statement

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion