title: Get the ref of an element rendering by an array
body: <p>I'm coding a tab navigation system with a sliding animation, the tabs are all visible, but only the selected tab is scrolled to. Problem is that, I need to get the ref of the current selected page, so  I can set the overall height of the slide, because that page may be taller or shorter than other tabs.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { MutableRefObject } from 'react';
  import Props from './Props';
  import styles from './Tabs.module.scss';
  
  export default function Tabs(props: Props) {
      const [currTab, setCurrTab] = React.useState(0);
      const [tabsWidth, setTabsWidth] = React.useState(0);
      const [currentTabHeight, setCurrentTabHeight] = React.useState(0);
      const [currentTabElement, setCurrentTabElement] = React.useState&lt;Element | null&gt;(null);
      const thisRef = React.useRef&lt;HTMLDivElement&gt;(null);
      let currentTabRef = React.useRef&lt;HTMLDivElement&gt;(null);
      let refList: MutableRefObject&lt;HTMLDivElement&gt;[] = [];
  
      const calculateSizeData = () =&gt; {
          if (thisRef.current &amp;&amp; tabsWidth !== thisRef.current.offsetWidth) {
              setTabsWidth(() =&gt; thisRef.current.clientWidth);
          }
  
          if (currentTabRef.current &amp;&amp; currentTabHeight !== currentTabRef.current.offsetHeight) {
              setCurrentTabHeight(() =&gt; currentTabRef.current.offsetHeight);
          }
      }
  
      React.useEffect(() =&gt; {
          calculateSizeData();
  
          const resizeListener = new ResizeObserver(() =&gt; {
              calculateSizeData();
          });
  
          resizeListener.observe(thisRef.current);
  
          return () =&gt; {
              resizeListener.disconnect();
          }
      }, []);
  
      refList.length = 0;
  
      return (
          &lt;div ref={thisRef} className={styles._}&gt;
              &lt;div className={styles.tabs}&gt;
                  { props.tabs.map((tab, index) =&gt; {
                      return (
                          &lt;button onClick={() =&gt; {
                              setCurrTab(index);
                              calculateSizeData();
                          }} className={currTab === index ? styles.tabsButtonActive : ''} key={`nav-${index}`}&gt;
                              { tab.label }
  
                              &lt;svg&gt;
                                  &lt;rect rx={2} width={'100%'} height={3} /&gt;
                              &lt;/svg&gt;
                          &lt;/button&gt;
                      )
                  }) }
              &lt;/div&gt;
  
              &lt;div style={{
                  height: currentTabHeight + 'px',
              }} className={styles.content}&gt;
                  &lt;div style={{
                      right: `-${currTab * tabsWidth}px`,
                  }} className={styles.contentStream}&gt;
                      { [ ...props.tabs ].reverse().map((tab, index) =&gt; {
                          const ref = React.useRef&lt;HTMLDivElement&gt;(null);
  
                          refList.push(ref);
  
                          return (
                              &lt;div ref={ref} style={{
                                  width: tabsWidth + 'px',
                              }} key={`body-${index}`}&gt;
                                  { tab.body }
                              &lt;/div&gt;
                          );
                      }) }
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );   
  }
  </code></pre>