horizontal scroll with buttons React

Question

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

Answer 1

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:

const images = {
  salesRibbon__arrowBack: "",
  salesRibbon__arrowForward: ""
};

const ScrollContainer = React.forwardRef((props, container) => (
  <div ref={container}></div>
))

const SalesRibbon = () => {
  const container = React.useRef(null);

  const scroll = (scrollOffset) => {
    container.current.scrollLeft += scrollOffset;
    console.log("scrolled", scrollOffset);
  };

  return (
    <React.Fragment>
      <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>
      <ScrollContainer
        className="salesRibbon__productCarousel"
        ref={container}
        vertical={false}
      ></ScrollContainer>
    </React.Fragment>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<SalesRibbon />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>