Are there any other HTML attributes that are reserved keywords in JavaScript that I wont be able to use in JSX?

Question

Are there any other HTML attributes that are reserved keywords in JavaScript that I wont be able to use in JSX?

Answer

In JSX, some HTML attributes will use camelCase and/or a different attribute name, but the two main attributes to be aware of (as we’ll use these most often and because their original HTML attribute name is a reserved JavaScript keyword) are:

  • class - which will be className in JSX
  • for - which will be htmlFor in JSX

To read about more HTML attributes that use different names in JSX, check the React documentation for Tags and Attributes.

16 Likes

thank you for answering

1 Like

aubsrey is a genius , she explains the answer in a very very elegant way

7 Likes

aubsrey, thank you for your service. It is really appreciative <3.

Why is class replaced with className instead of cssClass? It would make it more consistent with htmlFor

Looking into the documentation, the only answer I can find is that it still needed to be associated with the name aspect of classes in HTML and not the idea of class. I know that isn’t the best answer.

Hi @dokterkaj, the reason is that JSX gets compiled into JS in order to be interpreted by the browser. In JS, the equivalent of the HTML “class” attribute is the “className” property, please see here. There is no “cssClass” property in JS.

2 Likes

hah I felt a little bit of shame having to write that I’m a big div

4 Likes

Do be,You did great!