JSX is a syntax extension for JavaScript that is commonly used with React to describe what the UI should look like. When building applications in React, developers often face the need to return multiple elements from a component. This guide provides a comprehensive overview of how to return multiple elements in JSX, complete with examples and best practices.

Returning Multiple Elements from a Component

1. Using Fragment <></>

A common and simple way to return multiple elements in JSX without adding extra nodes to the DOM is by using React Fragments. Fragments let you group a list of children without adding extra nodes to the DOM.

Example:

import React from 'react';


function App() {
  return (
    <>
      <h1>Hello, world!</h1>
      <p>Welcome to my app.</p>
    </>
  );
}

This code snippet wraps multiple elements in <>...</>, which is a shorthand syntax for <React.Fragment>...</React.Fragment>. This method is particularly useful when rendering a list of elements or when the DOM structure must be kept minimal.

2. Using <React.Fragment>

If you need to pass keys or other attributes, you’ll have to use the <React.Fragment> tag explicitly.

Example:

import React from 'react';


function ListItem({ items }) {
  return items.map((item, index) => (
    <React.Fragment key={index}>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </React.Fragment>
  ));
}

This example demonstrates the use of <React.Fragment> for wrapping each item in a list with a key property, which is essential for performance optimisations in lists.

3. Returning an Array of Elements

You can return an array of elements from a component by including them in an array and separating them with commas.

Example:

import React from 'react';


function App() {
  return [
    <h1 key="1">Hello, world!</h1>,
    <p key="2">Welcome to my app.</p>
  ];
}

When using this method, it is crucial to remember that each element in the array must have a unique key prop to help React identify which items have changed, are added, or are removed.

4. Using Higher-order Components (HOCs)

For more complex scenarios, where you might want to abstract or manipulate props or state across multiple components, using a Higher-order Component (HOC) can be appropriate.

Example:

import React from 'react';


function withGreeting(WrappedComponent) {
  return function WrappedWithGreeting(props) {
    return (
      <>
        <h1>Welcome!</h1>
        <WrappedComponent {...props} />
      </>
    );
  };
}


function UserProfile({ name }) {
  return <p>Profile: {name}</p>;
}


const EnhancedProfile = withGreeting(UserProfile);


function App() {
  return <EnhancedProfile name="John Doe" />;
}

This example shows how an HOC can be used to wrap another component and add additional elements both before and after the wrapped component.

5. Using Conditional Rendering

Often, you might want to render elements conditionally. Here's how you can incorporate conditional logic with multiple elements in JSX.

Example:

import React from 'react';


function App({ isLoggedIn }) {
  return (
    <>
      <h1>Welcome to the app!</h1>
      {isLoggedIn ? (
        <UserProfile />
      ) : (
        <Login />
      )}
    </>
  );
}

This above snippet demonstrates how to conditionally render different components based on the isLoggedIn state.