Embedding JavaScript Expressions in JSX

1. The Curly Braces {} Window

JSX allows you to seamlessly integrate dynamic JavaScript logic directly into your presentation markup. Whenever you open curly braces {} within JSX, you are opening a window back into JavaScript.

Inside these curly braces, you can write any valid JavaScript expression that produces a value.

2. Expressions vs Statements in JSX

A critical concept that trips up beginners is the distinction between a JavaScript expression and a JavaScript statement:

• Expressions (Allowed in JSX): An expression evaluates to a single value. Examples include variable names, arithmetic operations, function calls, template literals, and ternary operators.
• Statements (Forbidden in JSX): Statements perform actions or declare control flow but do not evaluate to a single value. Examples include if/else blocks, for loops, while loops, and variable declarations (const x = 10;).

3. Passing Dynamic Attributes via {}

Curly braces are not only for element text content; they are also used to bind dynamic attributes and properties:

Note: Do not wrap curly braces in quotes when passing dynamic variables (src={user.avatarUrl}, NOT src="{user.avatarUrl}"). Quotes treat the value as a literal string.

4. How JSX Renders Different JavaScript Types

When rendering values inside {}:

• Strings and Numbers: Rendered directly to the screen as text nodes ({'MSK'} -> MSK, {42} -> 42).
• Booleans (true, false), null, and undefined: Rendered as nothing (empty). They produce no DOM output, making them ideal for conditional rendering.
• Arrays: Flattened and each item is rendered sequentially ({[<span key="1">A</span>, <span key="2">B</span>]}).
• Objects: Cannot be rendered directly as children! Attempting to render an object ({user}) throws an error: "Objects are not valid as a React child".