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?
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> ); }
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.
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>
);
}function Text({ isBlue }) { return ( <p style={/* your code here */}>Hello</p> ); }
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.
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?
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> ); }
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.
In Next.js projects, libraries like clsx or classnames are often used for conditional class names. What is the main advantage of using them?
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.
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?
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> ); }
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'.