Sometimes, we want to render array of components with React.

In this article, we’ll look at how to render array of components with React.

How to render array of components with React?

To render array of components with React, we can wrap the components in a fragment.

For instance, we write:

import React from "react";

const Foo = () => <p>foo</p>;

const Bar = () => <p>bar</p>;

const Baz = () => <p>baz</p>;

export default function App() {
  return (
    <>
      <Foo />
      <Bar />
      <Baz />
    </>
  );
}

to render the Foo, Bar, and Baz components inside the fragment.

And <> and </> are the opening and closing tags of the fragment respectively.

Conclusion

To render array of components with React, we can wrap the components in a fragment.