CODEWITHSUNDEEP
javascriptreactjs
varad
varad

Reputation: 8029

Return multiple elements inside React.render()

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 ?

Upvotes: 59

Views: 90038

Answers (5)

Brett DeWoody
Brett DeWoody

Reputation: 62763

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

Upvotes: 117

Sisyphus
Sisyphus

Reputation: 926

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

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

Upvotes: 12

lulalala
lulalala

Reputation: 17981

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

Upvotes: 22

Paridhi Sharma
Paridhi Sharma

Reputation: 121

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

Upvotes: 2

oleh.meleshko
oleh.meleshko

Reputation: 4795

There are few options:

  1. Just wrap it up in any <div></div> or <section></section>. render() should return single element.

  2. 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

Upvotes: -1

Related Questions