how to handle multiple refs inside a map function

Question

I need to target all the components inside map function, but I am only getting the last component inside it.

products?.map((product, i) => (
            <div
              key={product.id}
              className="product__card"
              onMouseEnter={() => sliderRef.current.slickNext()}
              onMouseLeave={() => sliderRef.current.slickPause()}
            >
              <StyledSlider {...settings} ref={sliderRef}>
                {product.assets.map(({ url, id, filename }) => (
                  <div className="product__image__container" key={id}>
                    <img src={url} alt={filename} />
                  </div>
                ))}
              </StyledSlider>
              <div className="product__content__container">
                <h3 className="slim__heading">{valueChopper(product.name, 23)}</h3>
                <p contentEditable="true" dangerouslySetInnerHTML={{ __html: valueChopper(product.description, 30) }} />
                <h6 className="slim__heading">Rs. {product.price.formatted}</h6>
              </div>
            </div>
          )

Does this answer your question? [How to deal with a ref within a loop?](https://stackoverflow.com/questions/52448143/how-to-deal-with-a-ref-within-a-loop) — ParthianShotgun, May 27 '21 at 14:41

score 0 · Accepted Answer · answered May 27 '21 at 14:45

The simplest way is to use one ref to target multiple elements. See the example below. I've modified your code to make it work.

const sliderRef = useRef([]);

products?.map((product, i) => (
  <div
    key={product.id}
    className="product__card"
    onMouseEnter={() => sliderRef.current[i].slickNext()}
    onMouseLeave={() => sliderRef.current[i].slickPause()}
  >
    <StyledSlider {...settings} ref={el => sliderRef.current[i] = el}>
      {product.assets.map(({ url, id, filename }) => (
        <div className="product__image__container" key={id}>
          <img src={url} alt={filename} />
        </div>
    ))}
    </StyledSlider>
    <div className="product__content__container">
      <h3 className="slim__heading">{valueChopper(product.name, 23)}</h3>
      <p contentEditable="true" dangerouslySetInnerHTML={{ __html:valueChopper(product.description, 30) }} />
      <h6 className="slim__heading">Rs. {product.price.formatted}</h6>
    </div>
  </div>
)

how to handle multiple refs inside a map function

1 Answers1