React Fragments

In React, fragments allow you to group elements without adding an additional wrapping element to the DOM. When rendering JSX code in React, only one parent element can be returned. Therefore, if you wish to render multiple elements without a parent container, you will typically need to wrap them in the appropriate container element.

React Fragments solve this problem by allowing you to return multiple siblings without wrapping them in a container. With fragments, you are able to create components that return a list of elements without adding additional markup to the DOM.

Before React 16.2, you had to wrap multiple elements in a single parent element to return multiple elements from a component.

Example

render() {
    return (
      <div>
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
      </div>
    );
  } 

Although the code above works, it adds an unnecessary div element as a wrapper.

render() {
    return (
      <>
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
      </>
    );
  } 

As shown in the example above, the ... syntax is used to define a React Fragment. By using fragments, you can group elements together without adding more nodes to the DOM.

A fragment can also have a key, just as regular elements can. This is useful if you need to specify a particular identifier for each fragment in an array of elements. By avoiding unnecessary wrapper elements, React Fragments makes your code cleaner and more readable.

Examples of how React Fragments can be used

List rendering:

import React from 'react';

const MyListComponent = ({ items }) => {
  return (
    <>
      <h2>List of Items:</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
};

export default MyListComponent; 

As an example, we have a MyListComponent which receives an array of items. Using React Fragments, we can render the list of items without a wrapping container.

Conditional rendering:

import React from 'react';

const MyComponent = ({ isLoggedIn }) => {
  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome, User!</h1>
      ) : (
        <h1>Please log in to continue.</h1>
      )}
      <p>Some other content...</p>
    </>
  );
};

export default MyComponent; 

MyComponent conditionsally renders a welcome message or login prompt depending on the isLoggedIn property. A React Fragment can return multiple elements depending on its condition.

Grouping elements:

import React from 'react';

const MyComponent = () => {
  return (
    <>
      <div>
        <h2>Section 1</h2>
        <p>Some content...</p>
      </div>
      <div>
        <h2>Section 2</h2>
        <p>Some other content...</p>
      </div>
    </>
  );
};

export default MyComponent; 

Here, we have a MyComponent that groups sections of content into separate div elements. React Fragments allows us to render sections as siblings without affecting the structure of the DOM.