How can I return multiple lines JSX in another return statement in React?

Question

A single line works fine:

render: function () {   return (     {[1,2,3].map(function (n) {       return <p>{n}</p>     }}   ); } 

But not for multiple lines:

render: function () {   return (     {[1,2,3].map(function (n) {       return (         <h3>Item {n}</h3>         <p>Description {n}</p>       )     }}   ); } 

Answer 1

Try to think of the tags as function calls (see the documentation). Then the first one becomes:

{[1,2,3].map(function (n) {   return React.DOM.p(...); })} 

And the second one:

{[1,2,3].map(function (n) {   return (     React.DOM.h3(...)     React.DOM.p(...)   ) })} 

It should now be clear that the second snippet doesn't really make sense (you can't return more than one value in JavaScript). You have to either wrap it in another element (most likely what you'd want, that way you can also provide a valid key property), or you can use something like this:

{[1,2,3].map(function (n) {   return ([     React.DOM.h3(...),     React.DOM.p(...)   ]); })} 

With JSX syntactic sugar:

{[1,2,3].map(function (n) {   return ([     <h3></h3>, // note the comma     <p></p>   ]); })} 

You don't need to flatten the resulting array. React will do that for you. See the following fiddle http://jsfiddle.net/mEB2V/1/. Again: Wrapping the two elements into a div/section will most likely be better long term.