Fix: key map and img element

[IounOm]

/components/galleries.tsx

ประกาศ itemData ก่อน export default function

const itemData = [
  {
    img: "/galleries/galleries_1.jpeg",
  },
  {
    img: "/galleries/galleries_2.jpeg",
  },
  {
    img: "/galleries/galleries_3.jpeg",
  },
  {
    img: "/galleries/galleries_4.jpeg",
  },
  {
    img: "/galleries/galleries_5.jpeg",
  },
  {
    img: "/galleries/galleries_6.jpeg",
  },
  {
    img: "/galleries/galleries_7.jpeg",
  },
  {
    img: "/galleries/galleries_8.jpeg",
  },
  {
    img: "/galleries/galleries_9.jpeg",
  },
];

• map key ไม่ควรใช้ index
• element img ควรมี src และ alt ทั้งคู่ (เช็ค img ทุก components)

        {itemData.map((item, index) => (
          <Grid key={index} size={{ xs: 12, sm: 6, md: 4 }}>
            <Box>
              <img
                src={item.img}
                width="100%"
                height="400"
                className="box1"
              />
            </Box>
          </Grid>
        ))}

[MethasakTKL]

ได้เปลี่ยนเป็นการกำหนด id และ alt ให้กับ itemData แล้วเรียกใช้ครับ (ในหน้าอื่นๆก็เพิ่ม alt ให้กับ img แล้วครับ)

const itemData = [
  { id: "1", img: "/galleries/galleries_1.jpeg", alt: "Gallery image 1" },
  { id: "2", img: "/galleries/galleries_2.jpeg", alt: "Gallery image 2" },
  { id: "3", img: "/galleries/galleries_3.jpeg", alt: "Gallery image 3" },
  { id: "4", img: "/galleries/galleries_4.jpeg", alt: "Gallery image 4" },
  { id: "5", img: "/galleries/galleries_5.jpeg", alt: "Gallery image 5" },
  { id: "6", img: "/galleries/galleries_6.jpeg", alt: "Gallery image 6" },
  { id: "7", img: "/galleries/galleries_7.jpeg", alt: "Gallery image 7" },
  { id: "8", img: "/galleries/galleries_8.jpeg", alt: "Gallery image 8" },
  { id: "9", img: "/galleries/galleries_9.jpeg", alt: "Gallery image 9" },
];

แก้ key จาก index เป็น key={item.id}

 {itemData.map((item) => (
            <Grid key={item.id} size={{ xs: 12, sm: 6, md: 4 }}>
              <Box>
                <img
                  src={item.img}
                  alt={item.alt}
                  width="100%"
                  height="400"
                  className="box1"
                />
              </Box>
            </Grid>
          ))}