If conditions in JSX in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render the message only if showMessage is true.

React

function Greeting({ showMessage }) {
  return (
    <div>
      {showMessage && [1]
    </div>
  );
}

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

A<p>Hello, world!</p>

B<p>Hello, friend!</p>

C<p>Welcome back!</p>

D<p>Goodbye!</p>

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to wrap the message in JSX tags.

Using a string without JSX tags.

The expression uses logical AND to render the

Hello, world!

only if showMessage is true.

2fill in blank

medium

Complete the code to render Loading... if isLoading is true, otherwise render Data loaded.

React

function Loader({ isLoading }) {
  return (
    <div>
      {isLoading ? [1] : <p>Data loaded</p>}
    </div>
  );
}

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

ALoading...

B"Loading..."

C<span>Loading</span>

D<p>Loading...</p>

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain strings without JSX tags.

Forgetting the colon ':' in the ternary operator.

The ternary operator renders the JSX

Loading...

when isLoading is true.

3fill in blank

hard

Fix the error in the code to correctly render Welcome back! only if isLoggedIn is true.

React

function Welcome({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && [1]
    </div>
  );
}

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

A<p>Welcome back!</p>

B"Welcome back!"

CWelcome back!

D<Welcome back! />

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain strings without JSX tags.

Trying to use invalid JSX syntax like .

JSX requires elements to be wrapped in tags. Using

Welcome back!

is correct.

4fill in blank

hard

Fill both blanks to render Admin Panel if isAdmin is true, otherwise render User Panel.

React

function Panel({ isAdmin }) {
  return (
    <div>
      {isAdmin ? [1] : [2]
    </div>
  );
}

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

A<h1>Admin Panel</h1>

B<h2>User Panel</h2>

C<h1>User Panel</h1>

D<h2>Admin Panel</h2>

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the tags or texts for admin and user panels.

Using strings instead of JSX elements.

The ternary operator chooses between

Admin Panel

and

User Panel

based on isAdmin.

5fill in blank

hard

Fill all three blanks to render a greeting with the user's name if isLoggedIn is true, otherwise show a login button.

React

function UserGreeting({ isLoggedIn, userName }) {
  return (
    <div>
      {isLoggedIn ? <p>Hello, [1]!</p> : <button [2]>[3]</button>}
    </div>
  );
}

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

AuserName

Baria-label="login button"

CLog in

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string 'userName' instead of the variable userName.

Forgetting the aria-label attribute on the button.

Using incorrect button text.

The greeting uses the userName variable, the button has an aria-label for accessibility, and the button text is 'Log in'.