Rendering the Group Field

The Group field is used to create a repeatable collection of fields.

Before Reading

This page assumes that you have already imported the prismic-reactjs library as shown below.

import {Link, RichText, Date} from 'prismic-reactjs';

This page also assumes that you have retrieved your content and stored it in a state variable named document.

It is also assumed that you have imported a Link Resolver with the variable name linkResolver. To learn more about this, check out the Link Resolving page.

Repeatable Groups

Example 1

Here is how to retrieve and render the content within a repeatable Group field.

In this case, the Group field has an API ID of references. The group contains two fields, a Link field with the API ID of link and a Key Text field with an API ID of label.

Copy
render() {
  if (this.state.document) {
    const document = this.state.document;
    const references = document.data.references.map(function(reference, index) {
      return (
        <li key={index}>
          <a href={reference.link.url}>{reference.label}</a>
        </li>
      );
    });

    return <ul>{references}</ul>;
  } else {
    return null;
  }
}

Example 2

Here's another example that shows how to retrieve a group of images (e.g. a photo gallery) from a repeatable Group field.

In this case, the Group field has the API ID of photo_gallery. The group contains two fields, an Image field with the API ID of photo and a Key Text field with the API ID of caption.

Copy
render() {
  if (this.state.document) {
    const document = this.state.document;
    const gallery = document.data.photo_gallery.map(function(galleryItem, index) {
      return (
        <div key={index}>
          <img src={galleryItem.photo.url} alt={galleryItem.photo.alt}/>
          <span>{galleryItem.caption}</span>
        </div>
      );
    });

    return (
      <div className="image-gallery">
        {gallery}
      </div>
    );
  } else {
    return null;
  }
}

Non-repeatable Group

Even if the group is non-repeatable, the Group field will be an array. You simply need to get the first (and only) group in the array and you can retrieve the fields in the group like any other.

Here is an example showing how to retrieve the content of the fields in a non-repeatable Group.

In this case, the Group field has an API ID of banner_group. The group consists of the following fields:

Image field

banner_image

Rich Text field

banner_text

Link field

link

Rich Text field

link_label

Copy
render() {
  if (this.state.document) {
    const document = this.state.document;

    // Get the first and only element in the group array
    const banner = document.data.banner_group[0];

    return (
      <div className="banner">
        <img src={banner.banner_image.url} alt={banner.banner_image.alt} />
        <h3>{RichText.asText(banner.banner_text)}</h3>
        <a href={Link.url(banner.link, linkResolver)} className="button">
          {RichText.asText(banner.link_label)}
        </a>
      </div>
    );
  } else {
    return null;
  }
}