i need to make salesRibbon__productCarousel
scroll when i click to salesRibbon__arrows_arrowForward
forward and salesRibbon__arrows_arrowBack
backward
import React, { useRef } from 'react';
const SalesRibbon = () => {
const container = useRef(null); //<--- this thing ISN"T WORKING! i can't get a salesRibbon__productCarousel object into const
const scroll = (scrollOffset) => {
container.current.scrollLeft += scrollOffset;
};
return(
<div className='salesRibbon__arrows'>
<div className='salesRibbon__arrows_arrowBack' onClick={scroll(-20)}>
<div className='salesRibbon__arrowBack-gradient'></div>
<img className='salesRibbon__arrowBack-arrow' src={images.salesRibbon__arrowBack} alt='Стрілочка вліво'/>
</div>
<div className='salesRibbon__arrows_arrowForward' onClick={scroll(20)}>
<div className='salesRibbon__arrowForward-gradient'></div>
<img className='salesRibbon__arrowForward-arrow' src={images.salesRibbon__arrowForward} alt='Стрілочка вправо'/>
</div>
</div>
{/* <div className='salesRibbon__productCarousel_forHidden' id='salesRibbon__productCarousel_forHidden'> */}
<ScrollContainer className='salesRibbon__productCarousel' ref={container} vertical={false}>
{sales.map((data) => {
return(
<ErrorBoundary>
<ProductPlate key={data.id} sales={data}/>
<ProductPlate key={data.id} sales={data}/>
<ProductPlate key={data.id} sales={data}/>
<ProductPlate key={data.id} sales={data}/>
<ProductPlate key={data.id} sales={data}/>
</ErrorBoundary>
)
})
}
</ScrollContainer>
)
}
<div className='salesRibbon__arrows_arrowForward' onClick={() => document.getElementById('container').scrollLeft += 20}>
<— this bloddy doesn’t working as well
i just need to scroll salesRibbon__productCarousel
when i click salesRibbon__arrows_arrowBack
backward and salesRibbon__arrows_arrowForward
forward
2
Answers
INSTEAD
DO
change ref to innerRef
Here is an example of how your ScrollContainer would receive the reference. Click on the broken image links and you will see the scroll value in the console: