title: How to push specific items in a new array during a map?
body: <p>I'm mapping over an array of objects. I only want to display the items that can fit in a single line. The other ones have to be pushed in a new array, that will be displayed elsewhere (a "see more button" + a popover).</p>
  
  <p>In order to do it, I have a ref on the div that encompasses the mapped items. Once its height changes, I know I'm on another line, and that it's time to stop displaying items.</p>
  
  <p>I wrote:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Component = ({myArray}) =&gt; {
  let ref = React.useRef();
  const { height, width } = useSize(ref);
  const availableSpace = 24;
  const otherArray = [];
  
  return (  
    &lt;div ref={ref} style={{display: "flex" flexWrap:"flew-wrap"}}&gt;
     {myArray.map({label} =&gt; {
          height &gt; 24 &amp;&amp; otherArray.push({label});
          return (
              //stuff
           )
        })}
      {otherArray &amp;&amp; otherArray.length &gt; 0 &amp;&amp; (
      &lt;button onClick={()=&gt; showRemainingItemsInAPopover}&gt;
          +{otherArray.length}
      &lt;/button&gt;
      )}
      )
     }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Sadly, React renders all the items, and then pushes all of them again in otherArray.</p>
  
  <p>How to properly separate my array in two in real time?</p>
  
  <p>Thanks!</p>