CODEWITHSUNDEEP
javascriptreactjs
Demian Kasier
Demian Kasier

Reputation: 2523

how to render multiple children without JSX

How to write this without using JSX?

 var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

This comes from the react.js tutorial: http://facebook.github.io/react/docs/tutorial.html

I know I can do the following:

return (
   React.createElement('div', { className: "commentBox" },
        React.createElement('h1', {}, "Comments")
)

But this only adds one element. How can I add more next to one another.

Upvotes: 21

Views: 15687

Answers (5)

user639608
user639608

Reputation: 1

I had this problem, it took a while to solve by stepping through the interpreter source code:

var arrayOfData = [];
var buildArray = (function () {
    var id;
    var name;
    return{
        buildProc(index, oneName){

                id =  index;
                name =  oneName;
                arrayOfData[index] = (React.createElement('Option', {id},name));
        }
    }
})();
// then 
this.state.items = result;
var response = parseJson.parseStart(this.state.items);
var serverDims = response.split(":");
for (var i = 1; i < serverDims.length; i++) {
    buildArray.buildProc(i, serverDims[i] )
}

// then
 render(){
    const data = this.props.arrayOfData;

    return (
        React.createElement("select", {},
               data
        )
    // {data} Failed with "object not a valid React child,  data with no curly's worked

    )          
}

Upvotes: 0

Jonny Buchanan
Jonny Buchanan

Reputation: 62793

You can use the online Babel REPL (https://babeljs.io/repl/) as a quick way to convert little chunks of JSX to the equivalent JavaScript.

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement("div", {className: "commentBox"}, 
        React.createElement("h1", null, "Comments"), 
        React.createElement(CommentList, null), 
        React.createElement(CommentForm, null)
      )
    );
  }
});

It's also handy for checking what the transpiler outputs for the ES6 transforms it supports.

Upvotes: 25

freignat
freignat

Reputation: 57

if you have a variable number of children then you can use that: Using apply function which take an array of parameters.

React.createElement.apply(this, ['tbody', {your setting}].concat(this.renderLineList()))

where renderLineList is for instance:

renderLineList: function() {
        var data=this.props.data;
        var lineList=[];
        data.map(function(line) {
            lineList.push(React.createElement('tr', {your setting}));
        });
        return lineList;
    }

Upvotes: 4

Brigand
Brigand

Reputation: 86220

insin's answer is the direct translation, however you may prefer to use factories.

var div = React.createFactory('div'), h1 = React.createFactory('h1');

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      div({className: "commentBox"}, 
        h1(null, "Comments"), 
        React.createElement(CommentList, null), 
        React.createElement(CommentForm, null)
      )
    );
  }
});

createFactory essentially partially applies createElement. So the following are equivalent:

React.createElement(c, props, child1, child2);
React.createFactory(c)(props, child1, child2);

If you're just using es6 but aren't fond of JSX you can make it less verbose with destructuring assignment. See this jsbin for an interactive example using 6to5 instead of jsx.

var [div, h1, commentForm, commentList] = [
    'div', 'h1', CommentForm, CommentList
].map(React.createFactory);

Upvotes: 6

Henrik Andersson
Henrik Andersson

Reputation: 47172

You just add them one after another as children to your parent component,

return React.createElement("div", null, 
      React.createElement(CommentList, null), 
      React.createElement(CommentForm, null)
    );

Upvotes: 2

Related Questions