How to change the source of big image after clicking on the small image?-CodePudding

I have a set of small images stacked on the side and a larger version of the image on the right. I want the large image to change when I click on the small image but the problem is I could achieve this using vanilla JavaScript but I am unable to do that in reactjs. Below is the screenshot of how it looks enter image description here And below is the code

<div >

        <div >

          <div >

            <div >

            <div >

              <img src="https://i.ibb.co/5LdMxNp/image.jpg" alt="image" onclick="clickimg(this)">

              <img src="https://i.ibb.co/TqMj09C/image-1.jpg" alt="image" onclick="clickimg(this)">

              <img src="https://i.ibb.co/5LdMxNp/image.jpg" alt="image" onclick="clickimg(this)">

              <img src="https://i.ibb.co/5LdMxNp/image.jpg" alt="image" onclick="clickimg(this)">

        </div>

            <div >

              <img src="https://i.ibb.co/5LdMxNp/image.jpg" id="imagebox">

            </div>

            </div>

      </div>

And below is the vanilla JavaScript function I wrote

function clickimg(smallImg){

  var fullImg = document.getElementById("imagebox");

  fullImg.src= smallImg.src;

}

This runs properly on codepen. But this function doesn't work in reactjs.

CodePudding user response：

You should have use storage for an active image or as you said "main";

if you use React with hooks useState will good match to you to store active image;

And you should add function that handles clicking on small image;

<div >
   <img src='1' onClick={handleClick}/>
   <img src='2' onClick={handleClick}/>
   <img src='3' onClick={handleClick}/>
</div

<div >
   <img src={activeImage || '*src to default image*'}/>
</div>

const [activeImage, setActiveImage] = useState(*first or whatever logic*)

function handleClick(event){
   console.dir(event.target) // you should better inspect your HTML element
   const src = event.target.src;
   setActiveImage(src);
}

CodePudding user response：

Make use of the component state to keep track of the URL of the clicked small image, then set the currentImage as the src of the big image. See sample code below:

import React from "react";

export const ImageViewer = () => {
  const [currentImageURL, setcurrentImageURL] = useState("");

  //   Array of product image urls, *can be an object data structure for extra properties*
  const productImageURLs = [
    "https://picsum.photos/500/300?random=1",
    "https://picsum.photos/500/300?random=2",
    "https://picsum.photos/500/300?random=3",
  ];

  return (
    <div>
      {/* Small images */}
      {productImageURLs.map((url) => {
        return (
          <img
            src={url}
            className='small image'
            alt='small preview of product'
            onClick={() => setcurrentImageURL(url)}
          />
        );
      })}

      {/* Big image */}
      <img
        src={currentImageURL}
        className='big-img'
        alt='large preview of product'
      />
    </div>
  );
};