Attributes that work differently between React and HTML

Last Updated : 01 Dec, 2023

There is a minor difference between React(JSX) and HTML attributes. Like for example, the HTML attributes 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.

Some tags are given below:

Table of Content

className
Self-Closing Tag
htmlFor
Select Tag
textarea Tag
dangerouslySetInnerHTML

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

Infix to Postfix Converter using JavaScript

aksrathod07

Improve

Article Tags :