Skip to content

How to return multiple elements in JSX

How to workaround that the limitation that JSX has when having to return multiple elements from a component

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 = () => {
  return (
    <Dog />
    <Cat />
  )
}

One “classic” way to solve this is to wrap components and other HTML elements in a div:

const Pets = () => {
  return (
    <div>
      <Dog />
      <Cat />
    </div>
  )
}

However this introduces a problem - there’s an HTML element that was introduced just to make our JSX work, not necessary in the resulting HTML, but that’s where it ends into.

One solution is to to return an array of JSX elements:

const Pets = () => {
  return [
      <Dog />,
      <Cat />
  ]
}

Another solution is to use Fragment, a relatively new React feature that solves the problem for us:

const Pets = () => {
  return (
    <Fragment>
      <Dog />
      <Cat />
    </Fragment>
  )
}

it works like the div element we added before, but it’s not going to appear in the resulting HTML rendered to the browser. Win-win.


→ Here's my latest YouTube video

→ Get my React Beginner's Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list