I'm having an issue displaying the images from the JSON. The code is below.

const Products = [
  {
    id: "product-1",
    product: "Full set cortas comieman",
    description:
      "Lorem ipsum dolor sit amet consect etur adipisicing elit. Itaque amet indis perferendis blanditiisrepellendus etur quidem assumenda.",
    price: "$38.00",
    images: [
      "images/nail-polish-1.jpg",
      "images/nail-polish-2.jpg",
      "images/nail-polish-3.jpg",
    ],
  },
  {
    id: "product-2",
    product: "Full set medianas comieman",
    description:
      "Movet aeterno mel ex. Ei fabulas albucius mediocritatem cum. Nam ad corpora sententiae definitionem, an illud error essent nec. Quo dictas civibus luptatum ad, antiopam maiestatis necessitatibus at per, sit et choro iudico oporteat. Electram intellegebat reprehendunt cu quo. Qui at illum nostro iuvaret, an suas iudico verear sed.",
    price: "$50.00",
    images: ["images/nail-polish-2.jpg", "images/nail-polish-3.jpg"],
  }
]

and

export default function Price() {
  console.log(Products);
  return (
    <div className="bg-pink-100">
      <div className="pt-12 sm:pt-16 lg:pt-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
              Lorem ipsum
            </h2>
            <p className="mt-4 text-xl text-gray-600">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Sodales neque sodales ut etiam sit amet.
            </p>
          </div>
        </div>
      </div>
      <div className="mt-8 bg-white pb-16 sm:mt-12 sm:pb-20 lg:pb-28">
        <div className="relative">
          <div className="absolute inset-0 h-1/2 bg-pink-100" />
          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            {Products &&
              Products.map((record, index) => {
                return (
                  <div
                    className="mx-auto max-w-lg overflow-hidden rounded-lg shadow-lg lg:flex lg:max-w-none mt-6"
                    key={record.id}
                  >
                    <div className="flex-1 bg-white px-6 py-8 lg:p-12">
                      <h3
                        className="text-2xl font-bold text-gray-900 sm:text-3xl sm:tracking-tight"
                        key={record}
                      >
                        {record.product}
                      </h3>
                      <p className="mt-6 text-base text-gray-500">
                        Lorem ipsum dolor sit amet consect etur adipisicing
                        elit. Itaque amet indis perferendis blanditiis
                        repellendus etur quidem assumenda.
                      </p>

                      <div className="mt-8">
                        <div className="flex items-center">
                          <h4 className="flex-shrink-0 bg-white pr-4 text-base font-semibold text-pink-600">
                            Lorem ipsum
                          </h4>
                          <div className="flex-1 border-t-2 border-gray-200" />
                        </div>
                        <div key={record.id}>
                          <img src={record.images} alt={record.product} />
                        </div>
                        <ul
                          role="list"
                          className="mt-8 space-y-5 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-5 lg:space-y-0"
                        >
                          <li className="flex items-start lg:col-span-1">
                            <div className="flex-shrink-0"></div>
                            <p className="ml-3 text-sm text-gray-700"></p>
                          </li>
                        </ul>
                      </div>
                    </div>

                    <div className="bg-pink-50 py-8 px-6 text-center lg:flex lg:flex-shrink-0 lg:flex-col lg:justify-center lg:p-12">
                      <p className="text-lg font-medium leading-6 text-gray-900">
                        Price
                      </p>
                      <div
                        className="mt-4 flex items-center justify-center text-5xl font-bold tracking-tight text-gray-900"
                        key={record}
                      >
                        <span>{record.price}</span>
                      </div>
                    </div>
                  </div>
                );
              })}
          </div>
        </div>
      </div>
    </div>
  );
}

I'm trying to map all the images, but then I'd get the errors below, but no error in the console. I haven't found what I was looking for to get this done the way I wanted. It would be greatly appreciated if you have a good tutorial or suggestion. Hopefully, this is explained clearly. The image below is what I'm trying to add to all the images as a popup modal as well. But I need to get the mapping correct first.

Any help would be greatly appreciated.

CodePudding user response：

Based on the

CodePudding user response：

Images is an array, you'll have to loop over it as well.

{record.images.map(image => 
<img src={image} alt={record.product} />}