Reactjs - setting inline styles correctly

Question

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.

Answer 1

You could also try setting style inline without using a variable, like so:

style={{"height" : "100%"}} or,

for multiple attributes: style={{"height" : "100%", "width" : "50%"}}