Just One Yesterday

export default function Gallery(){

let images = [img1, img2, img3];

let [selectedImage, setSelectedImage] = useState([images[0]);

//This is the simple setup of an array of images. I used the react hook, useState and made variables of 'selectedImage' and 'setSelectedImage' to help me interchange information!

return (

<div>

<div className="main-picture">

<img src={selectedImage} className="main" alt="main" />

</div>

//The first div is created to store the main image of the gallery. It's image source is the variable 'selectedImage' because I plan to change it in the future with a 'setSelectedImage' state.

<div className = "gallery-section">

{images.map((image, index){

<div key={index}>

<img src={image} onClick ={()=> setSelectedImage(image)} alt={index} style={{opacity: selectedImage === image ? 0.7 : ""/>

</div>)}

//The second div is used to create a small thumbnail gallery of all the images in the array. In order to change the FIRST div's image with the SECOND div's image, I must use a function between them. In this case, I used onClick with an arrow function and gave it the variable 'setSelectedImage(image)' It seems to be better to use an arrow function as it will allow easier access to the data in the SECOND div, as it the coding hierarchy from upper to lower code prevents the 'image' source in 'setSelectedImage' from being used.

//Then I used a ternary condition to select the appropriate opacity! And then all done!