Ternary operator usage in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render 'Yes' if isActive is true, otherwise 'No'.

React

return <div>{isActive ? [1] : 'No'}</div>;

Drag options to blanks, or click blank then click option'

A'Yes'

B'No'

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Putting 'No' in both places so it never shows 'Yes'.

Using boolean true instead of string 'Yes'.

The ternary operator checks if isActive is true. If yes, it renders 'Yes', else 'No'.

2fill in blank

medium

Complete the code to display 'Logged in' if user exists, otherwise 'Guest'.

React

return <p>{user ? [1] : 'Guest'}</p>;

Drag options to blanks, or click blank then click option'

A'Logged in'

B'Guest'

Cuser.name

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the true and false parts.

Using user.name without checking if user exists.

The ternary operator shows 'Logged in' when user is truthy, else 'Guest'.

3fill in blank

hard

Fix the error in the ternary expression to render 'Active' if status equals 'active', else 'Inactive'.

React

return <span>{status === 'active' [1] 'Active' : 'Inactive'}</span>;

Drag options to blanks, or click blank then click option'

A==

B&&

C?

D||

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&&' instead of '?'.

Using '==' instead of '?'.

The ternary operator requires a question mark '?' after the condition before the true value.

4fill in blank

hard

Fill both blanks to render 'Welcome, Admin' if role is 'admin', else 'Welcome, User'.

React

return <h1>{role [1] 'admin' [2] 'Welcome, Admin' : 'Welcome, User'}</h1>;

Drag options to blanks, or click blank then click option'

A===

B!==

C?

D&&

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!=' instead of '===' for comparison.

Using '&&' instead of '?'.

Use '===' to compare role to 'admin', then '?' for the ternary operator.

5fill in blank

hard

Fill all three blanks to render the user's name if user exists, else 'Guest', and add a period at the end.

React

return <p>{user [1] 'name' [2] user.name [3] '.' : 'Guest'}</p>;

Drag options to blanks, or click blank then click option'

A?

B:

C+

D&&

Attempts:

3 left

💡 Hint

Common Mistakes

Using '?' instead of '&&' for existence check.

Forgetting to concatenate the period.

Use '&&' to check if user exists, then '?' and ':' for ternary, and '+' to concatenate the period.