React JSX Attributes

⚛️ React JSX Attributes

JSX allows you to add attributes to elements, just like in HTML, but there are some key differences:

 Basic Example


 

  • className instead of class (because class is a reserved word in JS)

  • JSX attributes use camelCase for most HTML attributes

 Common JSX Attribute Differences

HTML JSX
class className
for htmlFor
onclick onClick
tabindex tabIndex
maxlength maxLength
readonly readOnly

 Dynamic Attributes Using Expressions

You can use {} to embed JavaScript values:


 

Or shorter with ES6 shorthand:

 Event Attributes

React uses camelCase for event handlers:


 

 Boolean Attributes

In JSX, boolean attributes are written as true/false:

  • Unlike HTML, you must provide {true} or {false} explicitly.

Multiple Attributes

  • width and height values must be numbers (use {}).

 Spread Attributes

You can pass multiple props using the spread operator:

⚡ Summary

Feature Example
className instead of class <div className="container"></div>
htmlFor instead of for <label htmlFor="name">Name</label>
Inline style <div style={{ color: 'red', fontSize: 20 }}>Text</div>
Events <button onClick={handleClick}>Click</button>
Boolean attributes <input checked={true} />
Spread operator <Component {...props} />

JSX attributes allow you to dynamically control HTML elements in React, combine JavaScript logic, and make your components interactive.

You may also like...