A snippet of a structured data breadcrumb made using TypeScript and React

structured-bread-crumb.tsx

export interface IBreadcrumb {
  description: string;
  url: string;
}

const StructuredBreadcrumb = ({
  breadcrumbList
}: {
  breadcrumbList: IBreadcrumb[];
}) => (
  <ol
    itemScope={true}
    itemType="http://schema.org/BreadcrumbList"
    className="breadcrumbs-container"
  >
    {breadcrumbList.map((breadcrumb: IBreadcrumb, i: number) => (
      <li
        key={i}
        itemProp="itemListElement"
        itemScope={true}
        itemType="http://schema.org/ListItem"
      >
        <a
          href={breadcrumb.url}
          itemScope={true}
          itemType="http://schema.org/Thing"
          itemProp="item"
          itemID={breadcrumb.url}
        >
          <span itemProp="name">{breadcrumb.description}</span>
        </a>
        <meta itemProp="position" content={i.toString()} />
      </li>
    ))}
  </ol>
);

export default StructuredBreadcrumb;