Reactjs - setting inline styles correctly

html, javascript, reactjs

Solution

You need to do this:

var scope = {
     splitterStyle: {
         height: 100
     }
};

And then apply this styling to the required elements:

<div id="horizontal" style={splitterStyle}>

In your code you are doing this (which is incorrect):

<div id="horizontal" style={height}>

Where `height = 100`.

Problem

I am trying to use Reactjs with a kendo splitter. The splitter has a style attribute like ``` style="height: 100%" ``` With Reactjs, if I have understood things correctly, this can be implemented using an inline style ``` var style = { height: 100 } ``` However, I am also using Dustin Getz jsxutil to in an attempt to split things a part a bit more and have independent html fragments. Thus far I have the following html fragment (splitter.html) ``` <div id="splitter" className="k-content"> <div id="vertical"> <div> <p>Outer splitter : top pane (resizable and collapsible)</p> </div> <div id="middlePane"> {height} <div id="horizontal" style={height}> <div> <p>Inner splitter :: left pane</p> </div> <div> <p>Inner splitter :: center pane</p> </div> <div> <p>Inner splitter :: right pane</p> </div> </div> </div> <div> <p>Outer splitter : bottom pane (non-resizable, non-collapsible)</p> </div> ``` and a splitter.js component which references this html as follows ``` define(['react', 'external/react/js/jsxutil','text!internal/html/splitter.html'], function(React, jsxutil, splitterHtml) { 'use strict'; console.log('in app:' + splitterHtml); return React.createClass({ render: function () { var scope = { height: 100 }; console.log('about to render:' + scope.height); var dom = jsxutil.exec(splitterHtml, scope); console.log('rendered:' + dom); return dom; } }); } ) ``` Now when I run this, I can see the height correctly if I put it as content. However, when it executes as the style properties I am getting an error ``` The `style` prop expects a mapping from style properties to values, not a string. ``` So I obviously haven't quite got it mapped across correctly. I'd be really grateful if someone could give me a steer on correcting this.

Original source