kat kat - 2 months ago 10
React JSX Question

Generating inline font-size style using ReactJS

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!

kat kat
Answer

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 :)

Comments