JSX Attribute Binding

JSX attributes can receive dynamic values from JavaScript expressions. Wrapping a value in `{}` lets JSX evaluate an expression and use its result as the attribute value.

JSX looks similar to HTML, but JSX attributes can be connected directly to JavaScript values. A quoted attribute such as `className="card"` provides a literal string, while `className={className}` reads the value of a JavaScript variable.

Curly braces switch from JSX syntax into JavaScript expression syntax. This works with variables, property accesses, function calls, conditional expressions, and other expressions that produce a value. For example, `<img src={user.avatar} alt={user.name} />` uses values from the `user` object.

The expression must produce a value appropriate for the particular prop or DOM attribute. Boolean props are commonly written as `{isActive}`, while conditional values can use a ternary such as `disabled={!canSubmit}`. JSX does not require string interpolation syntax such as `${...}` for ordinary attribute binding.

Attribute names follow JSX conventions rather than always matching HTML spelling. For example, React uses `className` instead of HTML's `class`. Component props use the same binding syntax: `<Button size={buttonSize} />` passes the current value of `buttonSize` to the component.

Key points

• Use `{}` to evaluate a JavaScript expression inside a JSX attribute.
• Quoted attributes represent literal text; expression attributes can use variables or computed values.
• Attribute expressions can access object properties, call functions, or use conditional expressions.
• Use the attribute or prop name expected by JSX/React, such as `className` for CSS classes.
• A bound value is evaluated when the JSX expression is rendered.

Interview questions

How do you pass a JavaScript variable to a JSX attribute?

Place the JavaScript expression inside curly braces. For example, `<input value={username} />` passes the current value of `username` rather than the literal word `username`. This is the standard way to bind dynamic values to JSX props and attributes.

What is the difference between `className="active"` and `className={className}`?

The first form assigns the literal string `active` to `className`. The second evaluates the JavaScript variable named `className` and assigns its current value. Therefore, the second form is dynamic and can change when the variable's value changes.

Can JSX attribute expressions contain more than simple variables?

Yes. JSX accepts JavaScript expressions inside braces, so an attribute can use property access, function calls, arithmetic, logical operators, or a ternary expression. For example, `disabled={!isValid}` derives a boolean value from another variable. Statements such as `if` blocks cannot be placed directly inside the braces because they are not expressions.

How would you conditionally set a JSX attribute or prop?

A common approach is to use a ternary or another expression that produces the desired value. For example, `disabled={!canSubmit}` directly produces a boolean, while `className={isActive ? "active" : ""}` chooses between strings. The best expression depends on the expected type and semantics of the prop.