Generating inline font-size style using ReactJS

Question

I am trying to do something like this in ReactJS:

var MyReactClass = React.createClass({
    render: function() {
        var myDivText = "Hello!";
        var myFontSize = 6; //this is actually something more complicated, I'm calculating it on the fly
        var divStyle = {
            font-size: {fontSize + 'px !important;'},
        };
        return (<div style={divStyle}>{myDivText}</div>);
   }
});

The problem is that I get this error when I run my code: "Module build failed: Error: Parse Error: Line 5: Unexpected token -" apparently, React doesn't like that font-size has a dash in it. How do I get around this? Is there some way to escape that character for react? Is there some different css property that react likes better that does the same thing?

Thanks!

Answer 1

Use fontSize instead of font-size

the solution is to camelCase properties which usually contain a dash

http://facebook.github.io/react/tips/inline-styles.html

Answered my own question :)