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'));
<div class="container">
<h1>Title</h1>
<div id="app" class="center"></div>
</div>
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
.