i am trying to get the whole image of the img array to display but i don't know how to display the whole array . i successfully get the first element

my code

import React from "react";

const product = [
  {
    _id: 1,
    title: "hello",
    img: [
      "https://product.hstatic.net/1000075078/product/hong-tra-sua-tran-chau_326977_1fbd2f506b5e4355a864260e71331a8a.jpg",
      "https://product.hstatic.net/1000075078/product/1645971848_img-9789_ded484268a734fe59dd9612a8c2167c2.jpg",
      "https://product.hstatic.net/1000075078/product/1645971848_hong-tra-sua-tran-chau-da-lifestyle_da3374549eec4758bf1c282804cf45e7.jpg",
    ],
  },
];

console.log(product);
const SingleProductComponent = () => {
  return (
    <div>
      {product.map((item, index) => {
        return (
          <div key={index}>
            <div>
              <img src={item.img[0]} />;
            </div>
            <div>
              {item.img.map((e) => {
                <img src={e.image} />;
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default SingleProductComponent;

CodePudding user response：

You can use Array#map on the inner array as well. Note that you should consider using a better key than the index.

const SingleProductComponent = () => (
    <div>
      {product.map((item, index) => (
          <div key={index}>
            <div>
              {item.img.map((x, _idx) => <img key={_idx} src={x} />)}
            </div>
          </div>
        );
      )}
    </div>
  );