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

React and HTML have different ways of handling attributes. In React, some attributes are treated as JavaScript, while in HTML they are treated as strings. This can lead to confusion when working with React and HTML together.

Why React Treats Some Attributes as JavaScript?

React treats some attributes as JavaScript because they are used to modify the behavior of the component. For example, the "onClick" attribute is used to add an event listener to the element. In React, this attribute is treated as JavaScript, not as a string.

How This Affects Working with React and HTML?

This difference in handling attributes can lead to problems when working with React and HTML together. For example, if you try to add an onClick event listener to an HTML element using the React onClick attribute, it will not work because React will treat it as a string.

Attributes that React Treats as JavaScript

React treats the following attributes as JavaScript: onClick, onChange, and onSubmit.

Now let's look at each of them in detail.

The onClick attribute

The onClick attribute is used to add an event listener to the element. In React, this attribute is treated as JavaScript, not as a string.

This means that if you try to add an onClick event listener to an HTML element using the React onClick attribute, it will not work because React will treat it as a string.

Below is the code snippet showing how the onClick attribute is used in React −

```
<button onClick={() => alert('Hello, world!')}>
 Click me!
</button>
```

The onChange attribute

The onChange attribute is used to add an event listener to the element. In React, this attribute is treated as JavaScript, not as a string.

This means that if you try to add an onChange event listener to an HTML element using the React onChange attribute, it will not work because React will treat it as a string.

Below is the code snippet showing how the onChange attribute is used in React −

```
<input onChange={(event) => console.log(event.target.value)} />
```

The onSubmit attribute

The onSubmit attribute is used to add an event listener to the element. In React, this attribute is treated as JavaScript, not as a string.

This means that if you try to add an onSubmit event listener to an HTML element using the React onSubmit attribute, it will not work because React will treat it as a string.

Below is the code snippet showing how the onSubmit attribute is used in React −

```
<form onSubmit={(event) => event.preventDefault()}>
 ...
</form>
```

HTML Attributes that React Does Not Treat as JavaScript

React does not treat the following HTML attributes as JavaScript: href, src, and disabled.

Now let's look at each of them in detail.

The href attribute

The href attribute is used to specify the URL of the page that the link goes to. In React, this attribute is treated as a string, not as JavaScript.

This means that if you try to add an href event listener to an HTML element using the React href attribute, it will not work because React will treat it as a string.

The code snippet below shows how the href attribute is used in React −

```
<a href="/about">About</a>
```

The src attribute

The src attribute is used to specify the URL of the image that the img element displays. In React, this attribute is treated as a string, not as JavaScript.

This means that if you try to add a src event listener to an HTML element using the React src attribute, it will not work because React will treat it as a string.

The code snippet below shows how the src attribute is used in React −

```
<img src="/logo.png" alt="Logo" />
```

The disabled attribute

The disabled attribute is used to specify whether the input element should be disabled. In React, this attribute is treated as a string, not as JavaScript.

This means that if you try to add a disabled event listener to an HTML element using the React disabled attribute, it will not work because React will treat it as a string.

The code snippet below shows how the disabled attribute is used in React −

```
<input type="text" disabled />
```

React and HTML have different ways of handling attributes. In React, some attributes are treated as JavaScript, while in HTML they are treated as strings. This can lead to confusion when working with React and HTML together.