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.
