How to conditionally render a prop initialized as an empty object? - reactjs

Question

My application has a user input a query to make a request to the Pokemon API and the response is rendered. Prior to the user making a request, it shows No Pokemon yet, please submit a Pokemon.
I initialized pokemonCharacter as an empty object being passed to the PokemonInfo component. However, my conditional render logic is not working.
Please let me know how to solve this. https://codesandbox.io/s/pokedex-5j1jf
The following are my failed attempts.
Attempt #1
let myDiv;
if (pokemonCharacter && pokemonCharacter.length > 0) {
myDiv = <div>
<p>{pokemonCharacter.name}</p>
<img src={pokemonCharacter.sprites.front_default} alt="pokemon" />
</div>
} else {
myDiv = <p>No Pokemon yet, please submit a Pokemon!</p>
}
return ({myDiv})
Attempt #2
{(pokemonCharacter && pokemonCharacter.length > 0) ?
<div>
<p>{pokemonCharacter.name}</p>
<img src={pokemonCharacter.sprites.front_default} alt="pokemon" />
</div>
: <p>No Pokemon yet, please submit a Pokemon!</p>}
Attempt #3
const list = pokemonCharacter => {
if (!pokemonCharacter) {
return null;
}
if (!pokemonCharacter.length) {
return <p>No Pokemon yet, please submit a Pokemon!</p>
} else {
return (
<div>
<p>{pokemonCharacter.name}</p>
<img src={pokemonCharacter.sprites.front_default} alt="pokemon" />
</div>
)
}
}
return (
{list}
);

Answer 1

Where you are checking the loading status, just check if the status is false or not then display the component.
{ loading
? <p>Loading...</p>
: <PokemonInfo pokemonCharacter={pokemonCharacter} />
}

Answer 2

I solved this by checking if pokemonCharacter.name is truthy in the PokemonInfo component, as opposed to just checking if pokemonCharacter the object as a whole is truthy.
{pokemonCharacter.name ?
<div>
<p>{pokemonCharacter.name}</p>
<img src={pokemonCharacter.sprites.front_default} alt="pokemon" />
</div>
: <p>No Pokemon yet, please submit a Pokemon!</p>}