What does the following code do in React? JavaScript {isLoggedIn && <Dashboard />}

It will render <Dashboard /> only if isLoggedIn is true

It will always render <Dashboard />

It will never render <Dashboard />

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

Which of the following is the correct usage of && operator for inline conditional rendering?

{condition && <Component />}

{condition || <Component />}

{condition ? <Component />}

{<Component /> && condition}

Courses
Tutorials
Practice
Contests

Conditional Rendering In React

Here we will cover all the basic concepts of ReactJS like Rendering Components, Contitional Rendering and much more.

Last Updated :

Discuss

Comments

Question 1

Which of the following is the correct way to use conditional rendering in React with an if statement?

if (condition) { return <Component />; }
if (condition) { return Component() }
if condition return <Component />
if (condition) return <Component /> else return null

Discuss it

Question 2

What does the following code do in React?

JavaScript

{isLoggedIn && <Dashboard />}

It will always render <Dashboard />
It will render <Dashboard /> only if isLoggedIn is true
It will never render <Dashboard />
It will display an error

Discuss it

Question 3

Which of the following statements about ternary operators is true in React?

Ternary operators can only be used inside return.
Ternary operators can be used for conditional rendering in JSX.
Ternary operators are not allowed for conditional rendering in React.
Ternary operators always require else clause.

Discuss it

Question 4

How can you conditionally render a component based on a prop value?

By using props directly in JSX
By using && inside the JSX expression
By passing the prop to a function component
By modifying the component’s state

Discuss it

Question 5

How can you conditionally render a component based on a prop value?

By using props directly in JSX
By using && inside the JSX expression
By passing the prop to a function component
By modifying the component’s state

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

Which of the following is the correct usage of && operator for inline conditional rendering?

{condition && <Component />}
{condition || <Component />}
{condition ? <Component />}
{<Component /> && condition}

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

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion