Why return multiple elements in React is not allowed?

react fragment
react function return multiple values
react return multiple elements
how to create a component with multiple elements and no parent
react multiple elements wrapper
react multiple root components
can be done while more than one element needs to be returned from a component.
how to return component in react

it can only return only one element tag in render. In v16, we can render multiple elements by using an array. so why cannot straightly write mutiple element tags in React?

render(){
  return(
    <div />
    <div />
  )
}

I mean that why cannot render multiple elements but not how to render mutiple elements.


React implementation relies on constructing a tree like structure which it uses to for reconcilation. When you return multiple elements from React elements from the render method, the assumtion that the tree will have one root node for the Component will not longer hold, hence making it difficult to process reconcilation algorithm.

Thus react gives you a limitation to provide a root node. If you return an array of elements from v16 onwards, react will internally create a dummy node as the parent.

From version 16.2 onwards React provides a React.Fragment component, that provides a cleaner syntax to return multiple elements

render(){
  return(
    <React.Fragment>
       <div />
       <div />
    </React.Fragment>
  )
}

Why return multiple elements in React is not allowed?, it can only return only one element tag in render. In v16, we can render multiple elements by using an array. so why cannot straightly write mutiple element tags  Updating the Rendered Element . React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render().


React needs a parent element to render anything. You could put them in an array, or use a tool they gave for this exact purpose, the fragment component.

A fragment is just an empty node that won't show in the DOM allowing you to return multiple JSX components next to each other :

render(){
  return(
    <>
      <div />
      <div />
    </>
  )
}

If your linter is not a fan of this, you can use React.Fragment instead :

render(){
  return(
    <React.Fragment>
      <div />
      <div />
    </React.Fragment>
  )
}

The short answer to your question is... well this is just how React works and how their rendering engine is designed.

For now, multiple elements put together will not be interpreted as an array.

Return multiple elements from a component with React 16 , The basic way is to return an array of elements. To avoid warnings you have to add a key to each element, although it may not be needed in the  How do I render multiple components in React? Functional components and class component render functions can only return one component*. However, that component can have children. If you have multiple components, they need to wrapped in another top-level component.


You can try

render(){
  return[
    <div> Div 1</div>,
    <div> Div 2</div>,
    <div> Div 3</div>,
    <div> Div 4</div>
  ]
}

React JS-Return Multiple Element from `render()` function, Then, you will see the output of react component, there is no extra div added to wrap the component. If we do not want to add extra div (other  This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.


How to return multiple elements in JSX, When writing JSX in React, there's one caveat: you must return one parent item. Not more than one. For example, this is not possible: const Pets =  React elements are immutable. For example, you can’t change the children or a property of a React element. If you want to render something different later, you will describeit with a new React element tree created from scratch. I like to think of React elements as being like frames in a movie.


Can we return multiple elements in the render function?, However, the downside is that this added another element to the DOM, even if you did not want to add the <div> element. In the current versions,  As of React 16, any standard or custom DOM attributes are fully supported. React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the camelCase convention just like the DOM APIs:


Fragments – React, A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. Using Array map function is very common way to loop through an Array of elements and create components according them in React, this is a great way to do a loop which is pretty efficient and tidy way to do your loops in JSX, It's not the only way to do it, but the preferred way. Also, don't forget having a unique Key for each iteration as required.