spread array

breacrumb.tsx

import * as React from "react";

interface BreadcrumbTypes {
  name: string;
  item: string;
}
function Breadcrumb(breadcrumbs: BreadcrumbTypes[]) {
  return (
    <>
      test
      {Object.entries(breadcrumbs).map(([key, item]) => {
        console.log(typeof key); // string
        console.log(parseInt(key) + 1);
        // console.log(item);
        console.log(item.name);
        console.log(item.item);

        return (
          <>
            <p>{parseInt(key) + 1}</p>
            <p>{item.name}</p>
            <p>{item.item}</p>
          </>
        );
      })}
    </>
  );

}

const DeckPage = () => {

  return (
    <main>
      <h1>Deck</h1>

      <Breadcrumb
        {...[{
          name: "Light",
          item: "light"
        },
        {
          name: 'StrapiLight',
          item: 'strapiLight'
        }]}
      />
    </main>
  )
}

export default DeckPage