Im getting the error message Cannot read properties of undefined (reading 'product') in React

Question

Im trying to insert the below component (Image Gallery) into my product page and its not reading the word product properly so its unable to find the product info which is on my shop page. Can any assist with how I fix this. Thank you in advance

import React, { useState } from 'react';

export default function Imagegallery({product}) {

const prod=product
const highlight = document.querySelector(".gallery-highlight");
const previews = document.querySelectorAll(".image-preview img");


previews.forEach(preview => {
preview.addEventListener("click", function() {
const smallSrc = this.src;
const bigSrc = smallSrc.replace("small", "big");
previews.forEach(preview => preview.className.remove("image-active"));
highlight.src = bigSrc;
preview.className.add("image-active");
});
});

return (
<>
<div className="products">
<div className="product">
<div className="image-gallery">
<img className="gallery-highlight" img src={prod.product.image}
alt={prod.product.name}/>
<div className="image-preview">
<img src={prod.product.image2} className="image-active" />
<img src={prod.product.image3} />

<br />

</div>

</div>
</div>

</div>
</>
);
}

Answer 1

you need to apply useEffect and useState

PLS NOTE: if your isn't displaying you should store them in your PUBLIC FOLDER for easy access

import React, { useState, useEffect } from 'react';

export default function Imagegallery({product}) {

const [productData, setProductData] = useState([])

useEffect(()=>{
setProductData(product)
}, [product])

const highlight = document.querySelector(".gallery-highlight");
const previews = document.querySelectorAll(".image-preview img");


previews.forEach(preview => {
preview.addEventListener("click", function() {
const smallSrc = this.src;
const bigSrc = smallSrc.replace("small", "big");
previews.forEach(preview => preview.className.remove("image-active"));
highlight.src = bigSrc;
preview.className.add("image-active");
});
});

return (
<>
<div className="products">
<div className="product">
<div className="image-gallery">
<img className="gallery-highlight" img src={productData.image}
alt={productData.name}/>
<div className="image-preview">
<img src={productData.image2} className="image-active" />
<img src={productData.image3} />

<br />

</div>

</div>
</div>

</div>
</>
);
}

if this is your product info in your shop page NOTE: if result is an ARRAY then use at index 0 for example: productData[0].image

  const [products] = useState(
  {
    category: ART,
    name: 'Original David Bowie Mug Shot Mixed Media Framed 
    Artwork',
    cost: 200,
    image:'images/bowiebig.jpeg',  // this images folder should be store in react Public directory
    image2: 'images/bowiesmall.jpeg', // the same applies here
    image3:'images/bowie2small.jpeg', // the same applies here
    page:'Bowie',
    description: "Original David Bowie Mug Shot Mixed Media 
  Framed Artwork floral painting on wooden canvas with an 
  original pop art style David Bowie Mugshot on top painting is 
   framed with a red baroque style frame including the words 
   deadly flowers bloom around frame",

  },

{
    category: HOME_GARDEN,
    name: 'Blanket',
    cost: 19.99,
    image: