JSX Attributes and className

JSX attributes are like labels you stick onto your HTML elements, but written the JavaScript way instead of the HTML way.

In this page:

Setting className Instead of class
Passing Dynamic Attribute Values
The style Attribute Takes an Object

Setting className Instead of class

Because class is a reserved word in JavaScript, JSX uses className to apply a CSS class to an element instead of HTML's class attribute.

Note: Most editors autocomplete className correctly once you start typing class inside a JSX tag.

Warning: Writing class="box" instead of className="box" in JSX doesn't throw an error, but the class silently never gets applied to the rendered element.

Example: Setting className Instead of class

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function StyledBox() {
  return (
    <div className="box" style={{border: '2px solid #333', padding: '8px'}}>
      Styled with className
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<StyledBox />);
  </script>
</body>
</html>

Passing Dynamic Attribute Values

Any JSX attribute can take a dynamic value using curly braces, like src={imageUrl} or disabled={isLoading}, instead of a fixed string.

Note: A boolean attribute like disabled={true} enables the attribute; disabled={false} removes it entirely -- React handles the on/off logic for you.

Warning: Wrapping a dynamic attribute value in quotes, like src="{imageUrl}", turns it into the literal string '{imageUrl}' instead of evaluating the variable.

Example: Passing Dynamic Attribute Values

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function DynamicButton() {
  const isLoading = true;
  return <button disabled={isLoading}>{isLoading ? 'Loading...' : 'Submit'}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<DynamicButton />);
  </script>
</body>
</html>

The style Attribute Takes an Object

Unlike HTML, JSX's style attribute takes a JavaScript object with camelCased CSS properties, not a semicolon-separated string.

Note: Write inline styles as style={{ color: blue }} -- the outer braces are JSX, the inner braces are the object literal.

Warning: Writing style="color: blue;" (an HTML-style string) instead of a style object throws a React warning and doesn't apply the style.

Example: The style Attribute Takes an Object

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function InlineStyled() {
  return <p style={{ color: 'blue', fontWeight: 'bold' }}>Styled inline</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<InlineStyled />);
  </script>
</body>
</html>

Common Mistakes

Using class instead of className, which silently does nothing in JSX.
Forgetting to wrap dynamic attribute values in curly braces instead of quotes.
Using for instead of htmlFor on label elements.

Chapter Summary

JSX attributes use camelCase names, unlike lowercase HTML attributes.
className replaces class; htmlFor replaces for.
Static attribute values use quotes; dynamic values use curly braces.
Event handler attributes like onClick take a function reference, not a string.

Browser Support

No browser-specific restrictions -- attribute naming is a JSX convention, not a runtime feature.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson Embedding Expressions in JSX Next Lesson → Children and Nesting in JSX

JSX Attributes and className

Setting className Instead of class

Passing Dynamic Attribute Values

The style Attribute Takes an Object

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code