mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-24 23:01:18 +08:00
fix(curriculum): add explanation for double curlies syntax in React inline styles (#64417)
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
+2
@@ -50,6 +50,8 @@ function Button({ buttonText }) {
|
||||
}
|
||||
```
|
||||
|
||||
Notice the double curly braces `{{}}` in the `style` attribute. The outer braces indicate a JavaScript expression in JSX, while the inner braces define a JavaScript object literal. This syntax allows you to embed JavaScript objects directly in JSX attributes.
|
||||
|
||||
Sometimes you might want to pass in an object directly if there are only a few properties like shown here. Otherwise, passing in a name to an object would be better like in the first example.
|
||||
|
||||
It's important to note that while CSS property names are typically written in kebab case, like `font-size`, in React's inline styles, we use camel case, like `fontSize`. This is because the style object is a JavaScript object, and kebab case names are not valid as object keys in JavaScript without using quotes.
|
||||
|
||||
Reference in New Issue
Block a user