CODEWITHSUNDEEP
javascriptreactjs
Cristian Muscalu
Cristian Muscalu

Reputation: 9905

react is displaying only the last item in the array

renderItems(game){

    if (game.category_id === 2) {
        ownedGames.map((owned_game) => {
            if (owned_game.game_id === game.game_id) {
                renderPriceSection = renderOwned
                console.log(owned_game.game_title)
            } else {
                renderPriceSection = renderPrice
            }
        })
    } else {
        renderPriceSection = renderFreeToPlayTitle
    }

}
...
return(
    {renderPriceSection}
)

I'm trying to display some labels: Owned, $Price, Free

The console.log is displaying all the correct games that should have the Owned label.

But, on the page, the Owned label is ONLY showing up for the last item in the owned_games array.

Any idea why this is happening?

Edit:

I removed the renderItems() function and replaced {renderPriceSection} with this:

    {game.category_id === 2 ?
        ownedGames.map(owned_game =>
            owned_game.game_id === game.game_id ? renderOwned : renderPrice
        ) :
        renderFreeToPlayTitle
    }

Now the renderOwned and renderPrice is being displayed owned_games.length times for each item.
So now i'm on the oposite side of the wrong output :)))

Upvotes: 0

Views: 3109

Answers (4)

mindaJalaj
mindaJalaj

Reputation: 448

You store the renderPriceSelection in form of an array like below, and then render this array when you are returning values from this given function, here i have returned as list elements. Hope it helps.

renderItems(game){

    renderPriceSection = [];

    if (game.category_id === 2) {
     ownedGames.map((owned_game) => {
        if (owned_game.game_id === game.game_id) {
            renderPriceSection.push(renderOwned);
            console.log(owned_game.game_title)
        } else {
            renderPriceSection.push(renderPrice);
        }
      })
   } else {
      renderPriceSection.push(renderFreeToPlayTitle);
  }

}

 ...
 return(
    <ul>
       {renderPriceSection.map((eachPrice) => <li>eachPrice</li>)}
    </ul>
)

Upvotes: 0

Aleksey Polonka
Aleksey Polonka

Reputation: 583

From this code it's not entirely clear, but it seems to me that you rewrite the variable renderPriceSection at each iteration, and that's why renderItems returns the last element each time

Upvotes: 0

bluehipy
bluehipy

Reputation: 2294

Since you are modifying the same reference of renderPriceSection on every other iteration you are changing the same object, you are not creating a new one.

Upvotes: 1

Hemerson Carlin
Hemerson Carlin

Reputation: 7424

Array.map returns another array. It seems you are not returning anything inside your map function. Also, it's not clear what renderPriceSelection is supposed to be. 

renderPriceSelection = ownedGames.map((owned_game) => {
  if (owned_game.game_id === game.game_id) {
    return renderOwned
  } else {
    return renderPrice
  }
})

render {renderPriceSelection}

Upvotes: 0

Related Questions