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:
Syntax
<element className="class-name" attributeName={expression} />
<element style={{ camelCaseProperty: "value" }} />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
<!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
<!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
<!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>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Using
classinstead ofclassName, which silently does nothing in JSX. - Forgetting to wrap dynamic attribute values in curly braces instead of quotes.
- Using
forinstead ofhtmlForon label elements.
Chapter Summary
- JSX attributes use camelCase names, unlike lowercase HTML attributes.
classNamereplacesclass;htmlForreplacesfor.- Static attribute values use quotes; dynamic values use curly braces.
- Event handler attributes like
onClicktake 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: