Categories
React Answers

How to render array of components with React?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *