-1

Instead of returning a nested element.

<div>
    <div className="one">one</div>
    <div className="two">two</div>
</div>

how do I just return this

<div className="one">one</div>
<div className="two">two</div>
Chris
  • 57,622
  • 19
  • 111
  • 137
The Old County
  • 89
  • 13
  • 59
  • 129
  • 1
    You just can't render more than a single element, this is not suppose to work this way. Why would you do it ? – Nevosis Jun 02 '17 at 12:28
  • 2
    Possible duplicate of [How to return multiple lines JSX in another return statement in React?](https://stackoverflow.com/questions/23840997/how-to-return-multiple-lines-jsx-in-another-return-statement-in-react) – Mayank Shukla Jun 02 '17 at 12:32
  • 1
    Do you ever read the documentation or use the search function before asking?? – Chris Jun 02 '17 at 12:34
  • -- its the way the markup is - for handling the bootstrap – The Old County Jun 02 '17 at 12:56

2 Answers2

2

Like @Glenn Reyes mentioned, in react 16 you can do this

return [
  <li key="1">One</li>,
  <li key="2">Two</li>,
  <li key="3">Three</li>
];
caffeinescript
  • 1,365
  • 2
  • 13
  • 27
1

In the current version of React (v15), you can't return multiple Elements from render.

In the upcoming major version (React v16), you will be able to return arrays with multiple Elements from render

If you want to try it now, you can do so buy npm install react@next --save or via yarn with yarn add react@next

glennreyes
  • 2,281
  • 16
  • 19