What are fragments?

It's a common pattern or practice in React for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. You need to use either

<Fragment>

or a shorter syntax having empty tag (

<></>

).

Below is the example of how to use fragment inside Story component.

function Story({ title, description, date }) {
  return (
    <Fragment>
      <h2>{title}</h2>
      <p>{description}</p>
      <p>{date}</p>
    </Fragment>
  );
}

It is also possible to render list of fragments inside a loop with the mandatory key attribute supplied.

function StoryBook() {
  return stories.map((story) => (
    <Fragment key={story.id}>
      <h2>{story.title}</h2>
      <p>{story.description}</p>
      <p>{story.date}</p>
    </Fragment>
  ));
}

Usually, you don't need to use

<Fragment>

until there is a need of key attribute. The usage of shorter syntax looks like below.

function Story({ title, description, date }) {
  return (
    <>
      <h2>{title}</h2>
      <p>{description}</p>
      <p>{date}</p>
    </>
  );
}