Which statement is not a valid way to embed a JavaScript expression inside JSX content?

Which statement is not a valid way to embed a JavaScript expression inside JSX content?

• A. <div>{name}</div>
• B. <div>Name: {name}</div>
• C. <div>Name: name</div>
• D. <div>{1 + 2}</div>

Answer: (C)

In JSX, JavaScript expressions are embedded by wrapping them in curly braces. Anything inside the braces is evaluated, and the result is rendered, while content outside the braces is treated as literal text. So the first option evaluates the variable name and renders its value. The second option mixes static text with an expression, which is also valid. The fourth option evaluates the arithmetic expression inside braces, which is perfectly fine. The third option, however, shows the text “Name: name” without using curly braces around name, so it’s treated as literal text rather than evaluating a JavaScript expression, and thus it does not embed a JavaScript expression.

In JSX, JavaScript expressions are embedded by wrapping them in curly braces. Anything inside the braces is evaluated, and the result is rendered, while content outside the braces is treated as literal text.

So the first option evaluates the variable name and renders its value. The second option mixes static text with an expression, which is also valid. The fourth option evaluates the arithmetic expression inside braces, which is perfectly fine. The third option, however, shows the text “Name: name” without using curly braces around name, so it’s treated as literal text rather than evaluating a JavaScript expression, and thus it does not embed a JavaScript expression.