Attributes that work differently between React and HTML - GeeksforGeeks

28 May, 2021
There is a minor difference between React(JSX) and HTML attributes. Like for example, the HTML attribute like class and for are replaced with className and htmlFor in React. There are a number of attributes that work differently between React and HTML. Grammar in JSX is mostly the same as in HTML, but there are subtle differences to watch out for. 
We can’t use the attributes with the same name in both React and HTML because when the code is rendered in React, JSX gets translated into JavaScript, and the attributes like class and for are reserved words in JavaScript, so we can’t use the same attribute name in React.
1. className: In HTML, it’s common to use the class as an attribute name as shown below:
<h1 class="gfg">Welcome to GeeksforGeeks</h1>
But in JSX, we can’t use the word class. We have to use className instead which is applied to all regular DOM elements like <div>, <a>, and others. This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript.
<h1 className="gfg">Welcome to GeeksforGeeks</h1>
When JSX is rendered, the JSX className attributes are automatically rendered as class attributes.
2. Self-Closing Tag: Some HTML elements such as <img>, <br> and <input> use only one tag. The tag that belongs to a single tag that neither has an opening tag nor a closing tag, that is called self-closing tag.
When we write a self-closing tag in HTML, it is optional to use the self-closing tag. For example:
<img src=""> and <input>
But in JSX, we have to include the forward-slash.
<img src="" /> and <input />
3. htmlFor: In HTML, we often use for attribute in <label> element which is labeled control for the label element.
<label for="username">Click me</label>
<input type="text" id="username">
But in React instead of for attribute, we can use htmlFor attribute.
4. Select Tag: In HTML, the <select> tag creates multiple options and values. Our react-select component follows the same convention but the options and values are passed in as props. For example:
<select>
  <option value="GFG">GFG</option>
  <option value="OS">OS</option>
  <option value="DBMS">DBMS</option>
  <option selected value="Data Structure">
    Data Structure
  </option>
</select>
Note: Data Structure option is initially selected, because of the selected attribute. But in React instead of using a selected attribute, it uses a value attribute on the root select tag which is shown in the below example.
render() {
   return (
       <select value={this.state.value} 
                  onChange={this.handleChange}>
          <option value="GFG">GFG</option>
          <option value="OS">OS</option>
          <option value="DBMS">DBMS</option>
          <option selected value="Data Structure">
               Data Structure
          </option>
        </select>
   )
}
5. textarea Tag: In HTML <textarea> tag defines a multi-line text input control as shown below.
<textarea>Welcome to GeeksforGeeks</textarea>
But in React <textarea> uses a value attribute as shown below.
render() {
  return (
    <textarea value={this.state.value} 
        onChange={this.handleChange} />
  )
}
6. dangerouslySetInnerHTML: In HTML, we often use innerHTML either to set or return the HTML content of an element.
HTML
<!DOCTYPE html><html><body style="text-align: center">    <h1 style="color:green">GeeksforGeeks</h1>    <h2>DOM innerHTML Property</h2>    <p id="P">A computer science portal for geeks.</p>      <button onclick="geek()">      Try it    </button>    <p id="p"></p>      <script>        function geek() {            var x = document.getElementById("P").innerHTML;            document.getElementById("p").innerHTML = x;            document.getElementById("p").style.color = "green";        }    </script></body></html>
But in React instead of innerHTML we can use dangerouslySetInnerHTML in the browser DOM as shown below.
function gfg() {
    return { __html: 'First &middot; Second' };
}; 

<div dangerouslySetInnerHTML={gfg()} />  
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Attributes
HTML-Questions
React-Questions
ReactJS Attributes
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS Functional Components