React scroll to element (ref current is null) problem

Question

I have a problem I'm not able to solve. The app got a component where a do looping array and making multiple elements off it. Then I want to make buttons in another component that will scroll to a specific element. (something similar to liveuamap.com when you click on a circle).

I tried the below solution, but got "Uncaught TypeError: props.refs is undefined". I could not find any solution to fix it.

The second question: is there a better or different solution to make scrolling work?

In app component I creating refs and function for scrolling:

  const refs = DUMMY_DATA.reduce((acc, value) => {
     acc[value.id] = React.createRef();
     return acc;
   }, {});

   const handleClick = (id) => {
     console.log(refs);
     refs[id].current.scrollIntoView({
       behavior: "smooth",
       block: "start",
     });
   };

The refs I send to the article component as a prop where I render elements with generated refs from the app component.

  {props.data.map((article) => (
    <ContentArticlesCard
      key={article.id}
      ref={props.refs[article.id]}
      data={article}
      onActiveArticle={props.onActiveArticle}
      activeArticle={props.activeArticle}
    />
  ))}

The function is sent to another component as a prop where I create buttons from the same data with added function to scroll to a specific item in the article component.

{props.data.map((marker) => (
      <Marker
        position={[marker.location.lat, marker.location.lng]}
        icon={
          props.activeArticle === marker.id ? iconCircleActive : iconCircle
        }
        key={marker.id}
        eventHandlers={{
          click: () => {
            props.onActiveArticle(marker.id);
            // props.handleClick(marker.id);
          },
        }}
      ></Marker>
))}

Thanks for the answers.

Answer 1

Ok so i found the solution in library react-scroll with easy scroll implementation.