style={{ color: 'red' }} - What are the outer curly braces for?

style={{ color: 'red' }} - What are the outer curly braces for?

• A. They indicate a JavaScript expression to be evaluated in JSX.
• B. They define a string literal.
• C. They create a CSS class.
• D. They denote a boolean attribute.

Answer: (A)

In JSX, curly braces are used to embed JavaScript expressions inside the markup. The outer braces tell React to evaluate whatever is inside as JavaScript. Here, the value is an object literal, so the inner braces define that object with the style properties, like { color: 'red' }. Together, style={{ color: 'red' }} passes an object to the style prop, which is how React applies inline styles. This differs from using a string—style="color: red" would not be valid for inline styles in React, and className applies CSS classes rather than inline style properties. The double braces aren’t two separate ideas; the outer braces indicate a JavaScript expression, and the inner braces create the actual style object.

In JSX, curly braces are used to embed JavaScript expressions inside the markup. The outer braces tell React to evaluate whatever is inside as JavaScript. Here, the value is an object literal, so the inner braces define that object with the style properties, like { color: 'red' }. Together, style={{ color: 'red' }} passes an object to the style prop, which is how React applies inline styles.

This differs from using a string—style="color: red" would not be valid for inline styles in React, and className applies CSS classes rather than inline style properties. The double braces aren’t two separate ideas; the outer braces indicate a JavaScript expression, and the inner braces create the actual style object.