Détail d'un Pokémon en React

PokemonDetail.tsx

import { Link } from "react-router-dom";
import QueryState from "../../../components/QueryState";
import PokemonAbility from "../../../types/PokemonAbility";
import PokemonMove from "../../../types/PokemonMove";
import PokemonStat from "../../../types/PokemonStat";
import PokemonType from "../../../types/PokemonType";
import usePokemonDetail from "../hooks/usePokemonDetail";

type Props = {
  name: string;
};

export default function PokemonDetail(props: Props) {
  const { isLoading, error, data } = usePokemonDetail(props.name);

  if (isLoading || error) {
    return <QueryState error={error} isLoading={isLoading} />;
  }

  return (
    <>
      <div
        style={{
          textAlign: "center",
        }}
      >
        <Link to={"/"}>Return to list</Link>
      </div>
      {data && (
        <>
          <main>
            <h1>
              {data.name} ({data.id})
            </h1>
            <img src={data.image} alt={data.name} />
            <hr />

            <div
              style={{
                display: "flex",
                flexDirection: "row",
              }}
            >
              <div>
                <h2>Types</h2>
                <ul>
                  {data.types.map((type: PokemonType) => (
                    <li key={"pokemon-type-" + type}>{type}</li>
                  ))}
                </ul>
              </div>

              <div>
                <h2>Abilities</h2>
                <ul>
                  {data.abilities.map((ability: PokemonAbility) => (
                    <li key={"pokemon-ability-" + ability}>{ability}</li>
                  ))}
                </ul>
              </div>

              <div>
                <h2>Moves</h2>
                <ul>
                  {data.moves.map((move: PokemonMove) => (
                    <li key={"pokemon-move-" + move}>{move}</li>
                  ))}
                </ul>
              </div>

              <div>
                <h2>Stats</h2>
                <ul>
                  {data.stats.map((stat: PokemonStat) => (
                    <li key={"pokemon-stat-" + stat}>{stat}</li>
                  ))}
                </ul>
              </div>
            </div>
          </main>
        </>
      )}
    </>
  );
}