Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Attributes that work differently between React and HTML

  • Last Updated : 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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()} />  



My Personal Notes arrow_drop_up
Recommended Articles
Page :