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

javascript reactjs react-jsx
jsalonen picture jsalonen · Jun 21, 2015 · Viewed 65.9k times · Source

I've just started exploring React, by adding a component with a simple render function:

render() {
  return <div class="myApp"></div>
}

When I run the app, I get the following error:

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

I can solve this by changing class to className.

The question is; does React enforce this convention? Also why do I need to use className instead of the conventional class? If this is a restriction then is it due to JSX syntax or somewhere else?

Answer

Viacheslav picture Viacheslav · Jun 21, 2015

Yes, its a React convention:

Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.

JSX In Depth.

Related questions

How to pass props to {this.props.children}

I'm trying to find the proper way to define some components which could be used in a generic way: <Parent> <Child value="1"> <Child value="2"> </Parent> There is a logic going on for …

Read More
Adding script tag to React/JSX

I have a relatively straightforward issue of trying to add inline scripting to a React component. What I have so far: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } …

Read More
How to loop and render elements in React.js without an array of objects to map?

I'm trying to convert a jQuery component to React.js and one of the things I'm having difficulty with is rendering n number of elements based on a for loop. I understand this is not possible, or recommended and that …

Read More