Im having issues turning a html and js file into a react component (image gallery). The below is the component and the images are taken from a shop.js file. When I try to view the page it says return outside the function. Below is the image gallery component

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="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>
 </>
 );
 }

CodePudding user response：

 highlight.src = bigSrc;
  preview.className.add("image-active");
});
});
} ///remove this curly bracket 
``

CodePudding user response：

You added one extra curly braces when closing preview.forEach parenthesis.

});
});