What are the attributes that work differently between React and HTML?

React and HTML handle attributes differently, which can cause confusion for developers. While HTML attributes are always strings, React treats some attributes as JavaScript expressions and has specific naming conventions that differ from standard HTML.

Key Differences in Attribute Handling

The main differences between React and HTML attributes include:

• Naming Convention: React uses camelCase (onClick) vs HTML's lowercase (onclick)
• JavaScript Expressions: React attributes can accept JavaScript functions and expressions
• Special Attributes: Some HTML attributes have different names in React
• Boolean Handling: React handles boolean attributes differently than HTML

Event Handler Attributes

React event handlers are JavaScript functions, not strings like in HTML.

onClick Attribute

In HTML, onclick is lowercase and accepts a string. In React, onClick is camelCase and accepts a function.

// React - JavaScript function
<button onClick={() => alert('Hello, world!')}>
  Click me!
</button>

// HTML - string
<button onclick="alert('Hello, world!')">
  Click me!
</button>

onChange Attribute

React's onChange behaves differently from HTML's onchange and fires on every keystroke.

// React - fires on every change
<input onChange={(event) => console.log(event.target.value)} />

// HTML - fires when input loses focus
<input onchange="console.log(this.value)" />

onSubmit Attribute

Form submission handling follows the same pattern with camelCase naming and function values.

// React
<form onSubmit={(event) => event.preventDefault()}>
  <input type="submit" value="Submit" />
</form>

// HTML
<form onsubmit="event.preventDefault()">
  <input type="submit" value="Submit" />
</form>

Special Attribute Names

Some HTML attributes have different names in React due to JavaScript reserved words.

className vs class

React uses className instead of class because class is a JavaScript keyword.

// React
<div className="container">Content</div>

// HTML
<div class="container">Content</div>

htmlFor vs for

React uses htmlFor instead of for in label elements.

// React
<label htmlFor="email">Email:</label>
<input id="email" type="email" />

// HTML
<label for="email">Email:</label>
<input id="email" type="email" />

Boolean Attributes

React handles boolean attributes more explicitly than HTML.

// React - explicit boolean
<input type="text" disabled={true} />
<input type="text" disabled={false} />

// HTML - presence indicates true
<input type="text" disabled />
<input type="text" />

Standard String Attributes

Many attributes work the same in both React and HTML, accepting string values.

// These work identically in React and HTML
<a href="/about">About</a>
<img src="/logo.png" alt="Logo" />
<input type="text" placeholder="Enter text" />

Comparison Table

Conclusion

Understanding these attribute differences is crucial for React development. React's camelCase naming, JavaScript expression support, and special attribute names like className and htmlFor distinguish it from standard HTML, enabling more dynamic and type-safe component development.