Conditional class names, two ways
The template literal leaves a trailing space ("task ") when the condition is false; the helper produces clean strings and handles any number of optional classes. A prop written with no value, like done, means done={true}.
In JSX the style attribute takes a JavaScript object with camelCase property names (numbers become pixels for most properties), and className takes a string you can build from conditions to switch CSS classes on and off.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a Swatch component that takes a color prop and shows a 40×40 square of that colour with rounded corners, using a style object.
Make a Button that gets the class btn, plus btn-primary when primary is true and btn-disabled when disabled is true.
Explain it without notes
How is the style attribute in JSX different from HTML's?
When does React add px to a number in a style object?
Show two ways to add a class only when a condition is true.
When would you choose an inline style over a class?
Preview
Console
Nothing logged yet.Expected console output
"task done" "task done"
"task " "task urgent"
"task " "task"