Как модернизировать кнопку «Дополнительно» на React?

У меня есть React компоненты:

Pokemon.jsx

import React from "react";
import { useState, useEffect } from "react";
import { TailSpin } from "react-loader-spinner";
import { PokemonDetails } from "./PokemonDetails";

function Pokemon({ name, url }) {
  const [data, setData] = useState(null);
  const [show, setShow] = useState(false);

  useEffect(() => {
    fetch(url)
      .then((r) => r.json())
      .then(setData);
  }, [url]);

  const handleMore = async () => {
    const r = await fetch(url);
    const newData = await r.json();
    setData(newData);
    return newData;
  };

  return (
    <div>
      {data ? (
        <div>
          <div className="card">
            <div className="animate__animated animate__bounceInUp">
              <div className="card-image">
                <img src={data.sprites.front_default} alt="pokemon_img" />
                <span className="card-title">{name}</span>
              </div>
              <div className="card-content">
                {data.abilities.map((n, index) => (
                  <p key={index}>{n.ability.name}</p>
                ))}
              </div>
            </div>
            <button onClick={handleMore}>More</button>
          </div>
          <div className="card ">
            <PokemonDetails height={newData.height} weight={newData.width} />
          </div>
        </div>
      ) : (
        <div>
          <TailSpin type="Puff" color="purple" height={100} width={100} />
        </div>
      )}
    </div>
  );
}

export { Pokemon };


PokemonDetails.jsx

import React from "react";

function PokemonDetails({ height, weight }) {
  return (
    <div>
      <div className="card animate__animated animate__bounceInUp">
        <span className="card-title">{height}</span>

        <div className="card-content">{weight}</div>
      </div>
    </div>
  );
}

export { PokemonDetails };

Моя не рабочая реализация кнопки More должна отображать дополнительные характеристики покемона. Хотелось бы понять правильно ли я начал, и если да, то получить дальнейшие наводки


Ответы (0 шт):