article-body.js

import React from "react";

// Import Contentful Rich Text libraries
import { INLINES } from "@contentful/rich-text-types";
import { documentToReactComponents } from "@contentful/rich-text-react-renderer";

function ArticleBodyComponent() {
  const references = [];

  const options = {
    renderNode: {
      [INLINES.EMBEDDED_ENTRY]: (node) => {
        // Get an index for this reference
        const refIdx = references.length;
        // Add reference to the array
        references.push(node.data.target.fields);
        return (
          <sup>
            <a href={"#ref" + refIdx}>{"[" + refIdx + "]"}</a>
          </sup>
        );
      },
    },
  };
 
  return (
    <div>
      {documentToReactComponents(post.body2.json, options)}
      {references.length > 0 && (
        <>
          <h3>References</h3>
          <ul>
            {references.map((reference, idx) => {
              return (
                <li key={"ref" + idx}>
                  <sup>{"[" + idx + "] "}</sup>
                  <a id={"ref" + idx} href={reference.link["en-US"]}>
                    {reference.title["en-US"]}
                  </a>
                  {" (" + reference.publicationDate["en-US"] + ")"}
                </li>
              );
            })}
          </ul>
        </>
      )}
    </div>
  );
}

export default ArticleBodyComponent;