From e2a0145189e2710fda6b68f6c8853211020bb16a Mon Sep 17 00:00:00 2001 From: Jack Li <113951848+lijack04@users.noreply.github.com> Date: Sun, 14 Dec 2025 22:05:53 -0500 Subject: [PATCH] fix(curriculum): add explanation for double curlies syntax in React inline styles (#64417) Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> --- .../673500bfe1f41601c1ddb1a2.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md b/curriculum/challenges/english/blocks/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md index 8578048debe..dff009eeb51 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md @@ -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.