Conditional styling patterns in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a CSS class conditionally based on the isActive state.

NextJS

export default function Button() {
  const [isActive, setIsActive] = React.useState(false);
  return (
    <button className={isActive ? [1] : 'inactive'} onClick={() => setIsActive(!isActive)}>
      Click me
    </button>
  );
}

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

A'clicked'

B'button'

C'enabled'

D'active'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class name that doesn't match the active state styling.

Forgetting to use quotes around the class name string.

The class 'active' is applied when isActive is true, otherwise 'inactive' is used.

2fill in blank

medium

Complete the code to add a conditional inline style that changes the text color to red when error is true.

NextJS

export default function Message({ error }) {
  return (
    <p style={{ color: error ? [1] : 'black' }}>
      {error ? 'Error occurred' : 'All good'}
    </p>
  );
}

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

A'blue'

B'red'

C'green'

D'gray'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color that does not represent an error.

Forgetting to use quotes around the color string.

The text color should be red when error is true, otherwise black.

3fill in blank

hard

Fix the error in the code to conditionally add the highlight class when isSelected is true using template literals.

NextJS

export default function Item({ isSelected }) {
  return (
    <div className={`item [1]`}>
      Item content
    </div>
  );
}

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

A${isSelected ? 'highlight' : ''}

B${isSelected && 'highlight'}

C${isSelected || 'highlight'}

D${isSelected ? '' : 'highlight'}

Attempts:

3 left

💡 Hint

Common Mistakes

Using logical AND or OR operators that can add 'false' or 'true' strings.

Forgetting to use the ternary operator syntax inside template literals.

Using a ternary operator inside template literals correctly adds 'highlight' when isSelected is true, otherwise adds an empty string.

4fill in blank

hard

Fill both blanks to create a conditional className using the clsx library that adds 'active' when isActive is true and 'disabled' when isDisabled is true.

NextJS

import clsx from 'clsx';

export default function Toggle({ isActive, isDisabled }) {
  return (
    <button className={clsx({ [1]: isActive, [2]: isDisabled })}>
      Toggle
    </button>
  );
}

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

A'active'

B'enabled'

C'disabled'

D'selected'

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names that don't match the state.

Confusing the keys and values in the clsx object.

The clsx object keys are class names. 'active' is added if isActive is true, 'disabled' if isDisabled is true.

5fill in blank

hard

Fill all three blanks to create a conditional style object that sets backgroundColor to 'blue' if isPrimary is true, color to 'white' if isPrimary is true, and opacity to 0.5 if isDisabled is true.

NextJS

export default function StyledBox({ isPrimary, isDisabled }) {
  const style = {
    backgroundColor: [1] ? 'blue' : 'transparent',
    color: [2] ? 'white' : 'black',
    opacity: [3] ? 0.5 : 1
  };
  return <div style={style}>Box</div>;
}

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

AisPrimary

BisDisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up isPrimary and isDisabled in the style conditions.

Using incorrect boolean variables for each style property.

backgroundColor and color depend on isPrimary, opacity depends on isDisabled.