How to fix Unknown DOM property class. Did you mean className? in React

In this tutorial, we are going to learn about how to solve the Warning: Unknown DOM property class. Did you mean className? in React app.

When we use a class attribute to add a CSS class name to the react element we will see this type of error in our terminal.

import React from "react";

export default function App() {

  return (
    <div class="App">    </div>
  );
}

Warning: Unknown DOM property class. Did you mean className?

To fix this error, change the class to className like this:

import React from "react";

export default function App() {

  return (
    <div className="App">    </div>
  );
}

In react we use JSX to write HTML like syntax but it is not real html at the time of compiling it converts the JSX to JavaScript (but js already has a class keyword), so we need to use className instead of html class in react.