使用 PokeApi 给孩子 React Pass 道具

Question

I building small React App with PokeApi . So, I want to creating Pokedex App. My problem is that pokemon.name doesnt display on screen. I will show you. So, when I clicked on pokeCard, in SelectedPokemon props saved id of clicked pokeCard. But, I dont know why,when I doing fetch and passing pokemon props, in children's props I see only array of pages of pokemons instead pokemon.name .

.

Its code of Parent component. I think, that problem may be in fetch.

Parent component

function About(props) {
  let { SelectedPokemon } = props;
  const [Pokemon, setPokemon] = useState([]);
  const [Loading, setLoading] = useState(true);

  useEffect(() => {
    let endpointForPokemonDetails = `${API_URL}${SelectedPokemon}`;
    fetchPokemonDetails(endpointForPokemonDetails);
  });

  const fetchPokemonDetails = (endpointForPokemonDetails) => {
    fetch(endpointForPokemonDetails)
      .then((result) => result.json())
      .then((result) => {
        setPokemon([...Pokemon, result]);
      }, setLoading(false))
      .catch((error) => console.log("Error:", error));
  };

  return (
    <div
      style={{
        position: "fixed",
        top: 150,
        right: 150,
      }}
    >
      <PokemonDetails pokemon={Pokemon} />
    </div>
  );
}

Its Children Component :

function PokemonDetails(props) {
  let { pokemon } = props;
  return (
    <div style={{ border: "1px solid #333", height: "300px", width: "250px" }}>
      {pokemon.name}
    </div>
  );
}

Answer 1

I solved my problem.

My Pokemon is array. So I to loop over it.

{pokemon.map((pokemon) => ( <div key={pokemon.id}>{pokemon.name}</div> ))}

When I setting setPokemon([...Pokemon, result]) means implementation as new collection. I set setPokemon([...Pokemon, result]) and all works.