How can I combine child nodes with JSX?

Question

I want to build up a ul list from li elements, but the li elements will come from different sources, so I can't do it in one statement. It appears that JSX can't handle a set of child elements, this gives me a syntax error:

var items = <li>S</li>
  <li>S</li>
  <li>S</li>;

Ideally I want to do something like:

var items1 = <li>S</li>
  <li>S</li>
  <li>S</li>;
var items2 = <li>S</li>
  <li>S</li>
  <li>S</li>;
var list = <ul>{items1}{items2}</ul>;

Is there another way to achieve this?

Answer 1

JSX desugars very straightforwardly to Javascript syntax so you can mix it freely.

/** @jsx React.DOM */
var items1 = [ <li>S</li>,            var items1 = [ React.DOM.li({}, "S"),
               <li>S</li>,                           React.DOM.li({}, "S"),
               <li>S</li> ];                         React.DOM.li({}, "S") ];
var items2 = [ <li>S</li>,            var items2 = [ React.DOM.li({}, "S"),
               <li>S</li>,                           React.DOM.li({}, "S"),
               <li>S</li> ];                         React.DOM.li({}, "S") ];
var list = <ul>{items1+items2}</ul>;  var list = React.DOM.ul({}, items1+items2);