Sometimes, we want to render multiple React components in a React component.

In this article, we’ll look at how to render multiple React components in a React component.

Render Multiple React Components in a React Component

To render multiple React components in a React component, we can render an array of components or we can render multiple components inside a fragment.

For instance, we write:

import React from "react";

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

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

export default function App() {
  return [<Foo />, <Bar />];
}

to render Foo and Bar together by putting them in an array.

To render them in a fragment, we write:

import React from "react";

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

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

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

or:

import React from "react";

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

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

export default function App() {
  return (
    <React.Fragment>
      <Foo />
      <Bar />
    </React.Fragment>
  );
}

Conclusion

To render multiple React components in a React component, we can render an array of components or we can render multiple components inside a fragment.