how to render multiple children without JSX

Question

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.

RapPayne · Accepted Answer · 2018-11-26 20:31:40Z

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.

Brigand · Accepted Answer · 2014-12-04 16:57:36Z

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);

freignat · Accepted Answer · 2015-09-29 09:42:05Z

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; }

Thanks very much for sharing this .apply method I kept getting the warning of "Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ToolbarButton. See https://fb.me/react-warning-keys for more information." react.dev.js:18780:9 and this is what fixed it. I don't care about reconciliation but just wanted the warning in the dev version of react.js to shutup haha
Similarly, the spread operator can be used. Here is an example from my own code: React.createElement(tagName, null, ...childReactElements);

Henrik Andersson · Accepted Answer · 2014-12-04 09:14:25Z

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) );

Simas Joneliunas · Accepted Answer · 2020-08-11 01:32:17Z

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 ) }

Collectives™ on Stack Overflow

how to render multiple children without JSX

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Linked

Related