by Sai gowtham

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.

App.js
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:

App.js
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.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course