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 ?

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

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

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

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

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

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