How to use class instead of className In ReactJS
While specifying the class name of the element in React, beginners use class instead of className and this gives them errors. As class keyword is already reserved in JavaScript and JSX is nothing but an extension of JavaScript that’s why React uses className instead of class.
Example: Below is the example how beginners use class instead of classname
Javascript
import React from 'react';function MyComponent() { return ( <div class="yellow-bg"> <h1>Hello World!</h1> </div> );} |
You may think that the above code is valid, but it is an invalid code because it uses a class to specify the class name of the element. To avoid error use className to specify the class name of an element. Some experienced React developers also repeat this mistake often so always keep in mind that the class keyword is already reserved in JavaScript, so React uses className to specify the class name of an element.
Most Common Mistakes That React Developers Make
React is a JavaScript library for building user interfaces. During the process of developing a React app, we made a lot of common mistakes. That’s not a problem that we make mistakes, but it’s always a problem more than anything else if we don’t learn something by making a mistake. In this article, we will learn about the Top 5 most common mistakes that React developers make.
Some mistakes that react developers makes are given below:
Table of Content
- Fail to Proper Structure Application:
- Not Capitalizing Component Name:
- Using class instead of className:
- Calling Hooks from Class Components
- Not using key props when using Array map method
Contact Us