Return multiple elements inside React.render()

Question

I am new in react and I encountered with this problem:

render: function(){
    return (
        <h3>Account</h3>
        <a href="#" onClick={some_event}>Login</a>
        <a href="#" onClick={some_event}>Logout</a>
)}

When I am rendering like this it gives me error saying like multiple components must wrapt with end

Should I make one componenet for each html tag or each line or I can render in that way..

Any suggestion ?

Brett DeWoody · Accepted Answer · 2019-07-05T15:44:31.257

In React < v16.0 the render method can only render a single root node. (update: this is changed in v16, see below). In your case, you're returning 3 nodes. To get around this you can wrap your 3 nodes in a single root node:

render: function(){
  return (
    <div>
      <h3>Account</h3>
      <a href="#" onClick={some_event}>Login</a>
      <a href="#" onClick={some_event}>Logout</a>
    </div>
)}

In React v16 it's possible for render() to return an array of elements.

Like with other arrays, you’ll need to add a key to each element to avoid the key warning:

render() {
  return [
    <ChildA key="key1" />,
    <ChildB key="key2" />,
    <ChildC key="key3" />,
  ];
}

Another option is to use a Fragment. Fragments let you group a list of children without adding extra nodes to the DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

There is also a short syntax (<>) for declaring fragments:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Sometimes the styles need to account for this where a wrapping div creates problems in a flexbox layout for instance. I remember seeing something about ouputting React elements as an array. Looking around, this might be a more generous answer: https://stackoverflow.com/questions/23840997/how-to-return-multiple-lines-jsx-in-another-return-statement-in-react — Kevin Ghadyani, Jul 22 '16 at 08:44
The React.Fragment did the trick for me (i m on react 16). Thanks — Dimitris Thomas, Jan 30 '22 at 16:21

score 21 · Answer 2 · answered May 24 '17 at 05:38

21

Return an array of elements, separated by comma.

render: function(){
  return ([
    <h3>Account</h3>,
    <a href="#" onClick={some_event}>Login</a>,
    <a href="#" onClick={some_event}>Logout</a>
  ])
}

answered May 24 '17 at 05:38

lulalala

17,572
15
110
169

3

Personally, I'm finding this way much more useful, as it cuts down on container-itis (ever increasing amount of needless containers), and cleaner css styling. Thanks @lulalala – Justin Jun 26 '17 at 16:08
3

Keep in mind you need to provide a unique key prop when returning and array of elements. https://facebook.github.io/react/docs/lists-and-keys.html – Justin Jun 26 '17 at 16:21
1

In order to return an array from the render() method of a React Component you need react 16.x.x (which is a release candidate as of today): https://github.com/facebook/react/issues/2127#issuecomment-318202889 – tnajdek Sep 23 '17 at 20:11

score 11 · Answer 3 · edited Dec 15 '17 at 06:02

11

You can use the following syntax for fragments in React 16.2+:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

edited Dec 15 '17 at 06:02

Eric H

1,100
16
32

answered Dec 08 '17 at 06:53

Sisyphus

896
11
19

score 2 · Answer 4 · answered Jan 17 '17 at 09:02

React.render is a JavaScript function returning the DOM elements. Since in JavaScript, functions cannot return multiple expressions, so we can't return multiple elements in React. The function returns the first expression immediately after the "return" keyword, and then the function dies. That's why we are able to do this:

if(1) { return 1 } return 2

score -1 · Answer 5 · answered Jan 20 '16 at 07:09

There are few options:

Just wrap it up in any <div></div> or <section></section>. render() should return single element.
You can split it up and have multiple components which implement some dedicated logic which is better and used to be a good practice in React

Return multiple elements inside React.render()

5 Answers5

Linked

Related