React JSX Question
React not rendering classes on elements
I currently have two files, an app.js and a index.html and when I try to render a form with some CSS classes, the HTML elements display but the classes are missing.
This is my app.js
var Form = React.createClass({
handleClick: function() {
alert('click')
},
render: function() {
return (
<div>
<input class='form-control' type='text' name='list-name'/>
<button class="btn btn-primary" onClick={this.handleClick}>Submit</button>
</div>
);
}
});
ReactDOM.render(<Form/>,document.getElementById('app'));
This is my HTML body:
<div class="container">
<h1>Title</h1>
<div id="app" class="center"></div>
</div>
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
Because class can conflict with JSX, React, and ECMAScript, React developers chose to use className as the attribute for HTML elements instead of class. Per the React documentation:
Note: 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. Source
Thus, use className to signify an HTML element's class. Here's an applicable example:
return (
<div>
<input className='form-control' type='text' name='list-name'/>
<button className="btn btn-primary" onClick={this.handleClick}>Submit</button>
</div>
);
Notice that className is used in place of class.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download