React Fragments | Return multiple elements in React

Hello Friends,

In this post we will be learning what is React fragments and how to use that to returns multiple elements in react.

Inside this article:

• Expected output what we want
• JSX expressions must have one parent element React error
• Solving “JSX expressions must have one parent element” by adding div
• Using React.Fragment
• Short syntax for React Fragment

Expected output what we want.

Let us assume that you want to render a list on page but using two component as below where the UlComponent is calling the LIComponent. Below is the output we are expecting.

In the above output the Ul we want from one component and li from another component. Let us try to build those components.

Here is the UlComponent.

JSX expressions must have one parent element React error

In above code we are calling LiComponent. Lets see what we have in LIComponent.

In above code, we are trying to return three li elements but the editor is showing some error here, lets see what those error are by doing hover on those lines, Its says, “JSX expressions must have one parent element.” as below.

this simply means that you must have only one element as parent to be returned and this error can be solved by using any element like div. let us use div and then see the output.

if we update code as below

Solving “JSX expressions must have one parent element” by adding div

function LiComponent() {
  return (
    <div>
      <li>Data1</li>
      <li>Data2</li>
      <li>Data3</li>
    </div>
  );
}

export default LiComponent;

We are getting output as below.

We can see that we are getting extra div on UI and we don’t want that as a part of output. then what is the solution of that.

Using React.Fragment

The answer is React Fragments which give you ability to render multiple elements without rendering the fragment tag. In the below code I have used the React Fragments

import React from "react";
function LiComponent() {
  return (
    <React.Fragment>
      <li>Data1</li>
      <li>Data2</li>
      <li>Data3</li>
    </React.Fragment>
  );
}

export default LiComponent;

Here is output what we are getting on UI.

In the above output, you can see we are not getting any extra elements on UI so this is how the React Fragments are useful to return multiple elements in React.

Short syntax for React Fragment

There is one short syntax to for using React fragments as below which produce same output as above.

function LiComponent() {
  return (
    <>
      <li>Data1</li>
      <li>Data2</li>
      <li>Data3</li>
    </>
  );
}

export default LiComponent;

So, In this post we have learned about what is React Fragments and how we can use React fragments to return multiple elements . you can read more about React Fragments at https://reactjs.org/docs/fragments.html

you might be interested in learning :-

Rendering list dynamically and understanding keys in React – CodeLila

Thanks and Happy Learning :). Please give your valuable feedback and share this post if you liked and learned something from this post.