CODEWITHSUNDEEP
javascriptreactjsjsx
Alex_Lima84
Alex_Lima84

Reputation: 140

React, conditional rendering inside map method

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>
    )

Upvotes: 1

Views: 1258

Answers (2)

Youssouf Oumar
Youssouf Oumar

Reputation: 45835

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>
  );

Upvotes: 1

learning
learning

Reputation: 338

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>
    )

Upvotes: 2

Related Questions