how to use onClick in react slick

Question

I am using react slick in my Websites. I have 4 slides. Every Slide, I want a onClick Function to get the value. But When I click on the Slide, I am getting the last value only. I searched Stack Overflow but can't find solutions.

Here's the Code:

const productSlideImg = [
  { Img: prodImg1, ImgName: "img1", pageLink: "/home" },
  { Img: prodImg2, ImgName: "img2", pageLink: "/about" },
  { Img: prodImg3, ImgName: "img3", pageLink: "/contact" }
];


const handleClickSlide = (item) => {
    console.log(item); // getting "img3" only on every slide click

  };


<Slider
    autoplay={true}
    slidesToShow={1}
    slidesToScroll={1} >

            {productSlideImg.map((item, index) => (
              <div   >
                <img
                  style={{ borderRadius: "50px" }}
                  width={"100%"}
                  src={item.Img}
                  onClick={() => {handleClickSlide(item.ImgName) }}
                 
                />
              </div>
            ))}

          </Slider>

Please help me with some solutions

you have a mistake on code, I think you are checking a wrong point of code, you define `handleClickProduts` function on code but you use `handleClickSlide` on `onClick` event!! — masoud, Apr 28 '22 at 07:06

RoshaanAli · Answer 1 · 2022-04-28T07:15:55.220

1

you have created a different function handleClickProduts and using different function on img onClick

onClick={() => {handleClickProduts (item.ImgName) }}

CodeBox link: working code

edited Apr 28 '22 at 07:15

answered Apr 28 '22 at 07:08

RoshaanAli

136
1
8

Its a typo mistake. I have corrected that – soma iyappan Apr 28 '22 at 07:11
i have just updated the answer – RoshaanAli Apr 28 '22 at 07:16

iceeuwu · Answer 2 · 2023-07-06T10:53:05.490

0

I found the solution hope the person reading this finds this helpful. So I was using fade=true in react slick props settings removing that RESOLVED the issue for me. See Attached Photo

edited Jul 06 '23 at 10:53

answered Jul 06 '23 at 10:52

iceeuwu

1
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 08 '23 at 07:57

score 0 · Answer 3 · answered Jul 06 '23 at 11:09

I think your problem is that when you use array.map in react you need to add the key attribute. So in your case, you need to add the key in your div like this:

   <Slider autoplay={true} slidesToShow={1} slidesToScroll={1}>
    {productSlideImg.map((item, index) => (
      // adding the key attribute
      <div key={index}>
        <img
          style={{ borderRadius: "50px" }}
          width={"100%"}
          src={item.Img}
          onClick={() => {
            handleClickSlide(item.ImgName);
          }}
        />
      </div>
    ))}
  </Slider>;

how to use onClick in react slick

3 Answers3