Attributes that work differently between React and HTML

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 neveropen</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 neveropen</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 neveropen</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.

But in React instead of innerHTML we can use dangerouslySetInnerHTML in the browser DOM as shown below.

function gfg() {
    return { __html: 'First · Second' };
}; 

<div dangerouslySetInnerHTML={gfg()} />