title: react is displaying only the last item in the array
body: <pre><code>renderItems(game){
  
      if (game.category_id === 2) {
          ownedGames.map((owned_game) =&gt; {
              if (owned_game.game_id === game.game_id) {
                  renderPriceSection = renderOwned
                  console.log(owned_game.game_title)
              } else {
                  renderPriceSection = renderPrice
              }
          })
      } else {
          renderPriceSection = renderFreeToPlayTitle
      }
  
  }
  ...
  return(
      {renderPriceSection}
  )
  </code></pre>
  
  <p>I'm trying to display some labels: <code>Owned</code>, <code>$Price</code>, <code>Free</code></p>
  
  <p>The <code>console.log</code> is displaying all the correct games that should have the <code>Owned</code> label.  </p>
  
  <p>But, on the page, the <code>Owned</code> label is <strong>ONLY showing up for the last item</strong> in the <code>owned_games</code> array.  </p>
  
  <p>Any idea why this is happening?</p>
  
  <hr>
  
  <p><strong>Edit:</strong>  </p>
  
  <p>I removed the <code>renderItems()</code> function and replaced <code>{renderPriceSection}</code> with this:</p>
  
  <pre><code>    {game.category_id === 2 ?
          ownedGames.map(owned_game =&gt;
              owned_game.game_id === game.game_id ? renderOwned : renderPrice
          ) :
          renderFreeToPlayTitle
      }
  </code></pre>
  
  <p>Now the <code>renderOwned</code> and <code>renderPrice</code> is being displayed <code>owned_games.length</code> times for each item.<br>
  So now i'm on the oposite side of the wrong output :)))</p>