Как модернизировать кнопку «Дополнительно» на 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 должна отображать дополнительные характеристики покемона. Хотелось бы понять правильно ли я начал, и если да, то получить дальнейшие наводки