title: How to get the ref of the first element that's rendered with .map?
body: <p>I have a requirement to show thumbnails of videos(cards) in several rows and focus on the very first thumbnail. I did the display using Nested Map. The code basically iterates over a videos array and returns videos in several rows.</p>
  
  <p>How do we focus on the first element that renders? I think we need to get ref of the first element to focus. But how do we set ref here and reference it in another function?</p>
  
  <pre><code>const CategoryGrid = props =&gt; {
    return (
      &lt;HotKeys handlers={handlers}&gt;
        &lt;div className="grid-container"&gt;
          &lt;p className="title"&gt; {props.title.toUpperCase()} &lt;/p&gt;
          &lt;div className="grid"&gt;
            {
              props.videos.map((rowvideos,index) =&gt; {
                  var rowVideoArr = [];
                  rowvideos.map((video,key)=&gt;{
                    rowVideoArr.push(&lt;div  key={video.id} className="fleft card-container grow"&gt;
                      &lt;Card key={video.id} title={video.name} background={video.thumbnailUrl}/&gt;
                    &lt;/div&gt;)
                  })
                  return(&lt;div className="row" key={index}&gt;{rowVideoArr}&lt;/div&gt;)
              })
            }
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/HotKeys&gt;
    );
  }
  </code></pre>