Why is react removing my class names?

Question

I'm learning Reactjs, and I am rendering a simple page with some components. One of this components is this:

class Header extends React.Component {
    render(){
        return  (
            <header>
                <div class="container">
                    <Logo />
                    <Navigation />
                </div>
            </header>
        );
    }
}

export default Header

I'm using Bootstrap CSS I want the div inside the header to use the styles of container, how ever, after build, the class is gone.

Is there a way to force the attribute class in the components?

Answer 1

You have to use the className attribute instead of the class attribute, e.g :

class Header extends React.Component {
    render() {
        return  (
            <header>
                <div className="container">
                    <Logo />
                    <Navigation />
                </div>
            </header>
        );
    }
}

Check the list of Supported Attributes in the documentation.

All attributes are camel-cased and the attributes class and for are className and htmlFor, respectively, to match the DOM API specification.