React not rendering classes on elements

Question

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 1

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.

React not rendering classes on elements

Sign up