s2k s2k - 3 months ago 19
HTML Question

Why does the class attribute disappear from "h1" element rendered by React?

Here is the

render
method of my React.Component:

class Layout extends React.Component {
constructor() {
super();
this.state = {name: "Brian"};
}

changeName(name) {
this.setState({name});
}

render() {
return (
<h1 class="row">hello</h1>
);
}
}

ReactDOM.render(
<Layout/>,
document.getElementById('app')
);


And here is the rendered HTML:

<div id="app" class="container">
<h1 data-reactroot="">hello</h1>
</div>


I don't understand, why is the
class
attribute of
h1
vanishing?

Answer

React elements do not have a class property. You have to use className property.

The reason for this is provided here, in React's documentation:
https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components