React, conditional rendering inside map method

Question

I have the following code and I want to apply a conditional rendering, because the index 0 does not exist. I don't want to render the information for this particular index. How can I do it?

return (
        <section>
            {pokemonCards.map((pokemon, index) =>             
                <div key={index}>
                <img 
                    src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index}.png`} 
                    alt={pokemon.name}/>
                <p>{pokemon.name}</p>
                </div>
            )}
            <button 
                className="get-more-button" 
                onClick={getMorePokemons}>Get more pokemons
            </button>
        </section>
    )

Why don't you apply a pokemonCards.shift() before using that array ? It will remove the first element. You can read more here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — CevaComic
– CevaComic, Commented Jun 26, 2022 at 17:13
Thanks! Where exactly this method would be written in the code? inside the return? — Alex_Lima84
– Alex_Lima84, Commented Jun 26, 2022 at 17:24
Before the return, so the array is modified when you use it. — CevaComic
– CevaComic, Commented Jun 27, 2022 at 19:22

learning · Accepted Answer · 2022-06-26 17:09:18Z

2

This should work:

return (
        <section>
            {pokemonCards.map((pokemon, index) =>             
                {index === 0 ? null : <div key={index}>
                <img 
                    src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index}.png`} 
                    alt={pokemon.name}/>
                <p>{pokemon.name}</p>
                </div>
            )}
            <button 
                className="get-more-button" 
                onClick={getMorePokemons}>Get more pokemons
            </button>}
        </section>
    )

answered Jun 26, 2022 at 17:09

learning

3385 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Youssouf Oumar · Accepted Answer · 2023-02-13 08:40:14Z

1

You could do as below if you do not want to render an empty div for the nonexisting pokemon:

 return (
    <section>
      {pokemonCards.map(
        (pokemon, index) =>
          index !== 0 && (
            <div key={index}>
              <img
                src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index}.png`}
                alt={pokemon.name}
              />
              <p>{pokemon.name}</p>
            </div>
          )
      )}
      <button className="get-more-button" onClick={getMorePokemons}>
        Get more pokemons
      </button>
    </section>
  );

edited Feb 13, 2023 at 8:40

answered Jun 26, 2022 at 17:08

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

1 Comment

Amr Khaled Over a year ago

Should we not to add the index as a key?

Collectives™ on Stack Overflow

React, conditional rendering inside map method

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related