Conditional styling patterns in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered background color of the button?

Consider this Next.js functional component using conditional styling with Tailwind CSS:

import React, { useState } from 'react';

export default function ColorButton() {
  const [active, setActive] = useState(false);
  return (
    <button
      className={`px-4 py-2 font-bold text-white rounded ${active ? 'bg-green-500' : 'bg-red-500'}`}
      onClick={() => setActive(!active)}
      aria-pressed={active}
    >
      {active ? 'Active' : 'Inactive'}
    </button>
  );
}

What background color will the button have when first rendered?

NextJS

import React, { useState } from 'react';

export default function ColorButton() {
  const [active, setActive] = useState(false);
  return (
    <button
      className={`px-4 py-2 font-bold text-white rounded ${active ? 'bg-green-500' : 'bg-red-500'}`}
      onClick={() => setActive(!active)}
      aria-pressed={active}
    >
      {active ? 'Active' : 'Inactive'}
    </button>
  );
}

A The button has no background color.

B The button has a green background (bg-green-500).

C The button has a red background (bg-red-500).

D The button background color toggles rapidly on render.

💡 Hint

Look at the initial state value of active and how it affects the className.

The initial state active is false. The conditional expression uses active ? 'bg-green-500' : 'bg-red-500'. Since active is false, the button gets the class bg-red-500, which sets a red background.

📝 Syntax

intermediate

Which option correctly applies conditional inline styles in Next.js?

Given this Next.js component snippet, which option correctly applies a blue text color only when isBlue is true?

function Text({ isBlue }) {
  return (
    <p style={/* your code here */}>Hello</p>
  );
}

NextJS

function Text({ isBlue }) {
  return (
    <p style={/* your code here */}>Hello</p>
  );
}

A { color: isBlue || 'blue' }

B { color: isBlue && 'blue' }

C { color: isBlue ? 'blue' : 'false' }

D { color: isBlue ? 'blue' : undefined }

💡 Hint

Remember that inline style values must be strings or valid CSS values. Using false or undefined affects rendering differently.

Option D uses a ternary operator to set color to 'blue' if isBlue is true, otherwise undefined which means no color style is applied. Option D sets color to false when isBlue is false, which is invalid. Option D sets color to string 'false', which is not a valid color. Option D uses logical OR, which always results in 'blue' because isBlue || 'blue' returns 'blue' if isBlue is false.

🔧 Debug

advanced

Why does this conditional className not update on state change?

Examine this Next.js component:

import { useState } from 'react';

export default function Toggle() {
  const [on, setOn] = useState(false);

  function toggle() {
    on = !on;
  }

  return (
    <button className={on ? 'bg-blue-500' : 'bg-gray-500'} onClick={toggle}>
      {on ? 'On' : 'Off'}
    </button>
  );
}

Why does clicking the button not change its background color?

NextJS

import { useState } from 'react';

export default function Toggle() {
  const [on, setOn] = useState(false);

  function toggle() {
    on = !on;
  }

  return (
    <button className={on ? 'bg-blue-500' : 'bg-gray-500'} onClick={toggle}>
      {on ? 'On' : 'Off'}
    </button>
  );
}

A Directly assigning to 'on' does not update React state; use setOn instead.

B The initial state is true, so the color never changes.

C The toggle function is never called because onClick is misspelled.

D The className syntax is invalid and causes a runtime error.

💡 Hint

Think about how React state variables should be updated.

In React, state variables like 'on' must be updated using their setter function 'setOn'. Directly assigning 'on = !on' only changes the local variable and does not trigger a re-render. Therefore, the button's className does not update.

🧠 Conceptual

advanced

What is the advantage of using clsx or classnames for conditional styling?

In Next.js projects, libraries like clsx or classnames are often used for conditional class names. What is the main advantage of using them?

A They allow combining multiple class names conditionally in a clean, readable way.

B They automatically optimize CSS for faster loading.

C They enable inline styles to be written as JavaScript objects.

D They replace the need for CSS frameworks like Tailwind CSS.

💡 Hint

Think about how you manage multiple classes that depend on conditions.

Libraries like clsx and classnames help combine multiple class names based on conditions without messy string concatenation. They do not optimize CSS or replace CSS frameworks, nor do they handle inline styles.

❓ state_output

expert

What is the final rendered text and color after these state updates?

Consider this Next.js component:

import { useState, useEffect } from 'react';

export default function Status() {
  const [status, setStatus] = useState('idle');

  useEffect(() => {
    if (status === 'idle') {
      setStatus('loading');
    } else if (status === 'loading') {
      setTimeout(() => setStatus('done'), 100);
    }
  }, [status]);

  return (
    <div className={
      status === 'idle' ? 'text-gray-500' :
      status === 'loading' ? 'text-yellow-500' :
      'text-green-500'
    }>
      {status}
    </div>
  );
}

After the component mounts and all state updates finish, what text and text color class will be rendered?

NextJS

import { useState, useEffect } from 'react';

export default function Status() {
  const [status, setStatus] = useState('idle');

  useEffect(() => {
    if (status === 'idle') {
      setStatus('loading');
    } else if (status === 'loading') {
      setTimeout(() => setStatus('done'), 100);
    }
  }, [status]);

  return (
    <div className={
      status === 'idle' ? 'text-gray-500' :
      status === 'loading' ? 'text-yellow-500' :
      'text-green-500'
    }>
      {status}
    </div>
  );
}

A Text: 'idle' with class 'text-gray-500'.

B Text: 'done' with class 'text-green-500'.

C Text: 'loading' with class 'text-yellow-500'.

D Text: 'done' with class 'text-yellow-500'.

💡 Hint

Consider how useEffect triggers on state changes and the timing of setTimeout.

Initially, status is 'idle'. useEffect runs and sets status to 'loading'. On next render, useEffect runs again because status changed to 'loading', and schedules a timeout to set status to 'done' after 100ms. After 100ms, status updates to 'done'. The final render shows text 'done' with class 'text-green-500'.