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?

  • {condition && <MyComponent />}

  • {condition ? <MyComponent /> : null}

  • {condition && condition}

  • {condition || <MyComponent />}

Discuss it

Question 2

Why is null often used in conditional rendering?

  • It displays an empty <div>

  • It triggers an error boundary

  • It prevents rendering anything

  • It replaces the component with false

Discuss it

Question 3

Why can {count && <p>{count}</p>} behave unexpectedly when count = 0?

  • It throws an error

  • It still renders 0

  • It doesn’t render anything

  • It duplicates the element

Discuss it

Question 4

Which is the correct way to return multiple elements conditionally?

  • {isValid && (<p>Hello</p> <p>World</p>)}

  • {isValid && [<p>Hello</p>, <p>World</p>]}

  • {isValid && (<><p>Hello</p><p>World</p></>)}

  • {isValid ? <p>Hello</p><p>World</p> : null}

Discuss it

Question 5

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

  • It’s more explicit

  • It produces smaller bundle size

  • It avoids null checks in React’s reconciliation

  • Both are functionally identical, but && is cleaner

Discuss it

Question 6

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 />

  • It will never render anything.

Discuss it

Question 7

In the following code, what will be rendered?

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

  • null

  • undefined

  • <AdminPanel />

  • An error will occur

Discuss it

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?

  • {isLoading && "Loading..." || "Content"}

  • {isLoading ? "Loading..." : "Content"}

  • {!isLoading && "Loading..." ? "Content" : ""}

  • {isLoading && return "Loading..." : "Content"}

Discuss it

Question 9

What will be the output of the following?

<p>{count && "Items in cart"}</p>


  • Items in cart


  • 0

  • Nothing

  • Error

Discuss it

Question 10

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

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


  • Switch case rendering

  • Ternary operator

  • && operator

  • if statement

Discuss it

There are 10 questions to complete.

Take a part in the ongoing discussion