How to Add Comments, Attributes, and Inline Styles in JSX

To add comments, attributes, and inline styles in JSX, you need three small rules. Each one translates a piece of HTML into JavaScript, and the three rules all come from one fact: JSX compiles to JavaScript.

Comments clarify intent, attributes configure elements, and inline styles set visual values. Once you know the rules, the rest of JSX reads like JavaScript you already know.

Here is a comment inside a component:

App.jsx

function App() {
  return (
    <div>
      {/* This is a JSX comment. */}
      <h1>Dashboard</h1>
    </div>
  );
}

The comment does not appear on screen. It sits inside the JSX where a future reader will find it, which is the point.

Add a comment in JSX

Inside JSX, a comment must be wrapped in curly braces with an asterisk. The braces tell React to treat the contents as JavaScript, and the asterisk makes it a JavaScript block comment.

Outside the JSX, in the body of the component, a regular JavaScript comment with two slashes works as usual. The special syntax only matters between the tags.

Comments are for people, not the computer, so keep them short and explain why rather than what. You will most often comment out a line while testing, or leave a note for the next developer.

Write attributes in camelCase

HTML attributes are lowercase, but JSX turns most of them into camelCase because they become JavaScript object properties. The reserved word class becomes className, and for becomes htmlFor.

App.jsx

function EmailField() {
  return (
    <label htmlFor="email">
      Email
      <input id="email" maxLength={40} aria-describedby="hint" />
    </label>
  );
}

The label now associates with the input through htmlFor, and the input enforces a 40 character limit. The aria attribute keeps its hyphen, because aria and data attributes are the two groups that do not switch to camelCase.

When you mistype an attribute, React prints a warning in the browser console with the correct spelling. A quoted attribute is a string, while a brace-wrapped attribute reads a JavaScript value.

Apply inline styles as objects

Inline styles in JSX are JavaScript objects, not strings. Property names use camelCase, so background-color becomes backgroundColor.

App.jsx

function Banner() {
  return (
    <p style={{ backgroundColor: "crimson", color: "white" }}>
      Sale ends tonight.
    </p>
  );
}

The paragraph renders with a crimson background and white text. The outer braces open the JavaScript expression, and the inner braces are the style object itself.

The same object shape works for any style property, from margin to lineHeight. Most of the time a CSS class is cleaner than a style object, so reach for inline styles only when the value depends on data or state.

For the full attribute comparison, see the guide on JSX versus HTML. The braces themselves are covered in the guide on rendering variables and expressions in JSX.