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.

Practice

1. In Next.js, which is the simplest way to apply a CSS class conditionally based on a boolean isActive inside a component's JSX?

easy

A. <div className='active' if={isActive}>Content</div>

B. <div className={isActive ? 'active' : ''}>Content</div>

C. <div className={if isActive then 'active'}>Content</div>

D. <div className={isActive && 'active' || 'inactive'}>Content</div>

Solution

1. Step 1: Understand JSX conditional class syntax

   In JSX, you can use JavaScript expressions inside curly braces. The ternary operator condition ? valueIfTrue : valueIfFalse is a common way to apply classes conditionally.

2. Step 2: Evaluate each option's syntax

   <div className={isActive ? 'active' : ''}>Content</div> uses the ternary operator correctly. Options B and C use invalid JSX syntax. <div className={isActive && 'active' || 'inactive'}>Content</div> uses a logical expression that can cause unexpected results.

3. Final Answer:

   <div className={isActive ? 'active' : ''}>Content</div> -> Option B

4. Quick Check:

   Use ternary operator for conditional classes = A [OK]

Hint: Use ternary inside className for simple true/false styling [OK]

Common Mistakes:

• Using invalid JSX syntax like 'if' inside attributes
• Confusing logical AND/OR for conditional classes
• Forgetting to use curly braces for JS expressions

2. Which of the following is the correct syntax to conditionally add multiple CSS classes in Next.js JSX using template literals when isActive and isDisabled are booleans?

easy

A. className={['btn', isActive && 'active', isDisabled && 'disabled'].join(' ')}

B. className='btn' + (isActive ? ' active' : '') + (isDisabled ? ' disabled' : '')

C. className={`btn ${isActive && 'active'} ${isDisabled && 'disabled'}`}

D. className={btn isActive ? 'active' : '' isDisabled ? 'disabled' : ''}

Solution

1. Step 1: Understand template literals with conditional classes

   Template literals use backticks and allow embedding expressions with ${}. Using logical AND returns the class name if true or false (which renders as the string 'false') if false.

2. Step 2: Check each option's syntax

   className={`btn ${isActive && 'active'} ${isDisabled && 'disabled'}`} correctly uses template literals with logical AND. className='btn' + (isActive ? ' active' : '') + (isDisabled ? ' disabled' : '') uses string concatenation but misses curly braces for JSX expression. className={['btn', isActive && 'active', isDisabled && 'disabled'].join(' ')} uses an array join which works but is less common. className={btn isActive ? 'active' : '' isDisabled ? 'disabled' : ''} is invalid JSX syntax.

3. Final Answer:

   className={`btn ${isActive && 'active'} ${isDisabled && 'disabled'}`} -> Option C

4. Quick Check:

   Template literals with ${condition && 'class'} = C [OK]

Hint: Use backticks and ${condition && 'class'} for multiple classes [OK]

Common Mistakes:

• Forgetting curly braces around JSX expressions
• Using invalid syntax mixing strings and expressions
• Not handling false values rendering as 'false' string

3. Given this Next.js component code snippet, what will be the rendered class attribute when isActive is false and isDisabled is true?

function Button({ isActive, isDisabled }) {
  return (
    <button className={`btn ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`}>Click</button>
  );
}

medium

A. class="btn disabled"

B. class="btn"

C. class="btn active "

D. class="btn active disabled"

Solution

1. Step 1: Substitute boolean values into the template literal

   Since isActive is false, isActive ? 'active' : '' becomes an empty string. Since isDisabled is true, isDisabled ? 'disabled' : '' becomes 'disabled'.

2. Step 2: Combine the strings with spaces

   The final className string is btn disabled (note the double space between 'btn' and 'disabled' due to empty string). This renders as class="btn disabled", which browsers treat as btn disabled.

3. Final Answer:

   class="btn disabled" -> Option A

4. Quick Check:

   False condition yields empty string, true yields class = D [OK]

Hint: Replace ternary with values, watch spaces in template literals [OK]

Common Mistakes:

• Assuming false condition adds 'active' class
• Ignoring extra spaces in class string
• Confusing true/false in ternary expressions

4. Identify the error in this Next.js JSX snippet for conditional styling and select the fix:

function Alert({ isError }) {
  return <div className={isError ? 'error' : 'success'} else='hidden'>Message</div>;
}

medium

A. Wrap the div in a ternary operator outside JSX

B. Replace else='hidden' with className='hidden'

C. Change to {isError && 'error' || 'success'} and keep else attribute

D. Remove else='hidden' because JSX does not support 'else' attribute

Solution

1. Step 1: Identify invalid JSX attribute usage

   JSX does not support an else attribute on elements. Conditional logic must be inside curly braces.

2. Step 2: Fix by removing invalid attribute

   Removing else='hidden' leaves a valid ternary expression for className. To conditionally add 'hidden', use nested ternary or other logic inside className.

3. Final Answer:

   Remove else='hidden' because JSX does not support 'else' attribute -> Option D

4. Quick Check:

   JSX attributes must be valid props, no 'else' attribute = A [OK]

Hint: JSX attributes can't have 'else'; use ternary inside className [OK]

Common Mistakes:

• Trying to use 'else' as an attribute in JSX
• Not wrapping conditional logic inside curly braces
• Confusing HTML attributes with JSX props

5. You want to apply conditional styling in a Next.js component where the class 'highlight' should be added only if isSelected is true and count is greater than zero. Which of these is the best way to write the className attribute to handle this condition cleanly?

hard

A. className={isSelected && count > 0 ? 'item highlight' : 'item'}

B. className={`item ${isSelected && count > 0 ? 'highlight' : ''}`}

C. className={`item ${isSelected && count > 0 && 'highlight'}`}

D. className={`item ${isSelected ? count > 0 ? 'highlight' : '' : ''}`}

Solution

1. Step 1: Analyze each option's logic and readability

   className={`item ${isSelected && count > 0 ? 'highlight' : ''}`} uses a logical AND combined with ternary inside template literal, which can be confusing and may produce unexpected results. className={`item ${isSelected ? count > 0 ? 'highlight' : '' : ''}`} nests ternaries, which reduces readability. className={`item ${isSelected && count > 0 && 'highlight'}`} uses logical AND but if false returns false which renders as 'false' string in className. className={isSelected && count > 0 ? 'item highlight' : 'item'} uses a clear ternary outside template literal, returning full class strings, which is clean and safe.

2. Step 2: Choose the best practice for conditional classes

   className={isSelected && count > 0 ? 'item highlight' : 'item'} clearly returns either 'item highlight' or 'item' string, avoiding false or empty strings in className, making it the best pattern for this condition.

3. Final Answer:

   className={isSelected && count > 0 ? 'item highlight' : 'item'} -> Option A

4. Quick Check:

   Use full string ternary for multiple conditions = B [OK]

Hint: Use full string ternary to avoid false or empty class names [OK]

Common Mistakes:

• Returning false or empty strings inside template literals
• Nesting ternaries making code hard to read
• Using logical AND that outputs boolean in className