Set attributes and styles

JSX properties work like HTML attributes, but you choose whether each value is a string or a JavaScript expression.

A quoted property is a string. Braces pass a live value:

<img
  src={avatarUrl}
  alt={name}
  width={160}
  height={160}
  hidden={!avatarUrl}
/>

Here src and alt receive strings, width and height receive numbers, and hidden receives a boolean. Set avatarUrl to '' and the image disappears because hidden becomes true.

Do not quote an expression:

<img src="{avatarUrl}" alt="Profile" />

That sends the literal text {avatarUrl} to the browser. Inspect the element and you will see a broken image URL, not your variable.

Use CSS classes for most styling:

<p className={saved ? 'status status--saved' : 'status'}>
  {saved ? 'Saved' : 'Not saved'}
</p>

Toggle saved between true and false. The paragraph switches class and text together.

Inline styles receive an object with camelCase properties:

<div style={{ width: `${progress}%` }} />

Set progress to 40 and the div renders with style="width: 40%;".

Inline styles help when a value genuinely comes from data, such as a progress bar width. Classes are usually clearer for hover, focus, media queries, and a shared visual system across the app.

React does not make inaccessible markup safe. An image still needs useful alt text, and a clickable div is still the wrong control. Prefer semantic elements before you add behavior and styles.

Boolean attributes like disabled={isSaving} follow the same rule as other expressions. Pass true or false, not the strings "true" and "false".

The className prop maps to the DOM class attribute. React chose a different name because class is a reserved word in JavaScript.

Spread objects when you need several style properties from data: style={{ ...baseStyle, width: ${progress}% }}.

Change saved and progress, then inspect the actual class and style attributes in the DOM.