Usage with React.

[Extra-lightwill]

I'm having some problems with Flexbox Grid and React and I'm just wondering whether it's something to do with my setup or with the way that I'm referencing Flexbox grid.

When my code is like this (see below), it seems like only one className prop is registering rather than 4 so the application isn't benefiting from the responsive qualities of flexboxgrid - e.g. it isn't resizing as you might expect.

 <div className="col-xs-12
                col-sm-8
                col-md-6
                col-lg-4"> 

Does react allow multiple classnames like that or should I be using some other syntax?

I know there is a react-flexbox-grid (http://roylee0704.github.io/react-flexbox-grid/) alternative but I am building a Isomorphic application and cannot get it to work so if possible I would like to use this instead.

[Thành Trang]

Yes, React allow multiple className. But if you want to break into multiple lines, you need use "Template strings" feature in ES6. (More info here: https://babeljs.io/learn-es2015/#ecmascript-2015-features-template-strings)

<div className={`col-xs-12
                 col-sm-8
                 col-md-6
                 col-lg-4`}>

Or using inline

<div className="col-xs-12 col-sm-8 col-md-6 col-ld-4>
Content
</div>

It'll work perfectly.