title: React. How to implement scrolling to active list item?
body: <p>I build music player with search by the artist. </p>
  
  <p><a href="https://codesandbox.io/s/deezer-music-widget-s4dli?file=/src/components/SongsLis.js" rel="nofollow noreferrer">CODE SANDBOX</a></p>
  
  <p>this how my SongsList component looks like:</p>
  
  <pre><code>    const SongsList = (props) =&gt; {
    const {
      loading,
      errorMessage,
      songsList,
      toggleActive,
      setToggleActive,
    } = props;
    return (
      &lt;div className='player-list'&gt;
        &lt;div className='songs__list'&gt;
          {loading &amp;&amp; !errorMessage ? (
            &lt;span&gt;Loading...&lt;/span&gt;
          ) : errorMessage ? (
            &lt;div className='errorMessage'&gt;{errorMessage}&lt;/div&gt;
          ) : (
            songsList.map((song, index) =&gt; (
              &lt;Song
                key={`${index}`}
                song={song}
                index={index}
                active={toggleActive === index}
                setToggleActive={() =&gt; {
                  setToggleActive(index);
                  // console.log(toggleActive);
                }}
              /&gt;
            ))
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Now I want to implement scrolling the SongList based on the activeSong position, so the active song will always change scrollbar position automatically 
  to make it visible. What is the best way to do this?</p>