Why conditional rendering is needed in React - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a message only if the user is logged in.

React

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

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

A<p>Goodbye!</p>

B<p>Welcome back!</p>

C<p>Please sign up.</p>

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

Attempts:

3 left

💡 Hint

Common Mistakes

Using a message that does not relate to the logged-in state.

Rendering the message regardless of the condition.

Using isLoggedIn && <p>Welcome back!</p> shows the message only when isLoggedIn is true.

2fill in blank

medium

Complete the code to show 'Loading...' text while data is being fetched.

React

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

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

A<p>Error occurred</p>

B<p>No data</p>

C<p>Loading...</p>

D<p>Ready</p>

Attempts:

3 left

💡 Hint

Common Mistakes

Showing the loaded message even when loading.

Using incorrect JSX inside the ternary.

The ternary operator shows <p>Loading...</p> when isLoading is true, otherwise shows 'Data loaded'.

3fill in blank

hard

Fix the error in the code to conditionally render a button only if the user is an admin.

React

function AdminButton({ isAdmin }) {
  return (
    <div>
      {isAdmin && [1]
    </div>
  );
}

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

A<button>Delete User

Bbutton>Delete User</button>

C<button>Delete User</button

D<button>Delete User</button>

Attempts:

3 left

💡 Hint

Common Mistakes

Missing the opening or closing tag in JSX.

Using incomplete HTML tags inside JSX.

The correct JSX for a button includes opening and closing tags: <button>Delete User</button>.

4fill in blank

hard

Fill both blanks to render a message if user is logged in and show a logout button.

React

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

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

A<p>Welcome back!</p>

B<button>Logout</button>

C<p>Please log in.</p>

D<button>Login</button>

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the messages for logged in and logged out states.

Using buttons instead of messages in the wrong places.

When logged in, show welcome message; otherwise, ask to log in.

5fill in blank

hard

Fill all three blanks to render a list of items only if the list is not empty, otherwise show 'No items'.

React

function ItemList({ items }) {
  return (
    <div>
      {items.length > 0 ? (
        <ul>
          {items.map([1] => (
            <li key=[2]>[3]</li>
          ))}
        </ul>
      ) : (
        <p>No items</p>
      )}
    </div>
  );
}

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

Aitem

Bitem.id

Citem.name

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using index as key which is not recommended.

Using wrong variable names inside map.

Use item as the map parameter, item.id as the key, and item.name as the displayed text.