Contents of React Interview Questions

Comprehensive collection of React interview questions and answers covering hooks, components, state management, and best practices.

Why React Uses 'className' Instead of 'class'

In React, we use className instead of class when defining CSS classes for HTML elements. This is because class is a reserved keyword in JavaScript — it's used to declare classes when creating objects and handling inheritance. If React allowed class, it would cause conflicts with JavaScript's syntax rules.

React follows JavaScript closely, so to avoid any ambiguity, it uses className as a special property for adding CSS classes. Behind the scenes, React automatically translates className into a regular class attribute in the actual HTML rendered to the browser.

Here’s an example:

// Correct in React function MyComponent() { return <div className="container">Hello, World!</div>; }

If you mistakenly use class in JSX, you will get a syntax error or a warning.


In short:
React uses className to avoid clashing with JavaScript's reserved class keyword while still enabling developers to assign CSS classes in JSX.