How to apply a single ref to multiple elements like (<div>) ? React.js

Arsalan Najm 0
Viewed 25

I want to useRef() in 4 div elements, the divs controls the slider of some images. the code is like this:

const slider = useRef()
const slideLeft = () => {slider.current.scrollLeft = slider.current.scrollLeft - 500};
const slideRight = () => {slider.current.scrollLeft = slider.current.scrollLeft + 500};


<>
 <BsChevronLeft onClick={slideLeft}/>
   <div ref={slider}>
   //Images mapped in here
  </div>
 <BsChevronRight onClick={slideRight}/>
     <BsChevronLeft onClick={slideLeft}/>
   <div ref={slider}>
   //Images mapped in here
  </div>
 <BsChevronRight onClick={slideRight}/>
     <BsChevronLeft onClick={slideLeft}/>
   <div ref={slider}>
   //Images mapped in here
  </div>
 <BsChevronRight onClick={slideRight}/>
     <BsChevronLeft onClick={slideLeft}/>
   <div ref={slider}>
   //Images mapped in here
  </div>
 <BsChevronRight onClick={slideRight}/>
</>

But whenever I click the first slider or div it only effects the last slider element, Thanks in advance.

use-ref react-hooks reactjs
1 Answers

Try this:

const slider = useRef([]);

const slideLeft = (index) => {slider.current[index].scrollLeft = slider.current.scrollLeft - 500};
const slideRight = (index) => {slider.current[index].scrollLeft = slider.current.scrollLeft + 500};


<>
 <BsChevronLeft onClick={()=>slideLeft(0)}/>
   <div ref={(el) => slider.current[0] = el}>
   //Images mapped in here
  </div>
 <BsChevronRight onClick={()=>slideLeft(0)}/>
     <BsChevronLeft onClick={slideLeft}/>
</>

We create an array of ref and we put each element in the array, then we simply refactor the event handler so it takes an argument that is the index of the element that triggered it.

Hasan Ali0
Related