kat kat - 1 year ago 123
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
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?


kat kat
Answer Source

Use fontSize instead of font-size

the solution is to camelCase properties which usually contain a dash


Answered my own question :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download