Conditional component rendering in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn && [1]
    </div>
  );
}

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

A<Login />

B<Welcome />

CWelcome()

DLogin()

Attempts:

3 left

💡 Hint

Common Mistakes

Using the component as a function call instead of JSX.

Rendering the wrong component when logged in.

The expression {isLoggedIn && <Welcome />} renders the <Welcome /> component only when isLoggedIn is true.

2fill in blank

medium

Complete the code to render if the user is not logged in, otherwise render .

React

function App() {
  const isLoggedIn = false;
  return (
    <div>
      {isLoggedIn ? [1] : [1]
    </div>
  );
}

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

ADashboard()

B<Login />

C<Dashboard />

DLogin()

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the true and false components.

Using function calls instead of JSX.

The ternary operator chooses between <Dashboard /> and <Login />. Here, the first option is for when isLoggedIn is true.

3fill in blank

hard

Fix the error in the code to conditionally render only if user exists.

React

function App({ user }) {
  return (
    <div>
      {user [1] <Profile user={user} />}
    </div>
  );
}

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

A||

B!

C?

D&&

Attempts:

3 left

💡 Hint

Common Mistakes

Using || which renders the component when user is falsy.

Using ? without a false case.

The logical AND operator && renders <Profile /> only if user is truthy.

4fill in blank

hard

Fill both blanks to render if user is admin, else render .

React

function Dashboard({ user }) {
  return (
    <div>
      {user.role [1] 'admin' ? [2] : <UserPanel />}
    </div>
  );
}

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

A===

B!==

C<AdminPanel />

D<GuestPanel />

Attempts:

3 left

💡 Hint

Common Mistakes

Using !== instead of === causing wrong rendering.

Rendering the wrong component for admin.

The strict equality operator === checks if the role is 'admin'. If true, it renders <AdminPanel />, else <UserPanel />.

5fill in blank

hard

Fill all three blanks to create a dictionary of components to render based on status.

React

const statusComponents = {
  success: [1],
  error: [2],
  loading: [3]
};

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

A<SuccessMessage />

B<ErrorMessage />

C<LoadingSpinner />

D<DefaultMessage />

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up components for statuses.

Using component names without angle brackets.

This object maps status keys to their respective components for rendering.