Shawn Shawn - 3 months ago 28
React JSX Question

How to return multiple lines JSX in another return statement in React?

Single line works fine

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


not for multiple lines

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


Thanks.

Answer

Try to think of the tags as function calls (see docs). 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 JS). 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 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.

Comments