React: How to refresh a component with onClick using hooks - reactjs

Question

I'm pretty new on this.
As an exercise I did an App that renders images of cats when clicking on a button (the images are from an API and that works fine).
My idea was to make the button refresh new images when pressed, and I know I have to be using hooks, but I'm not sure if I should use useState, setState or something else.
Here is the code
import React, { useState } from "react";
import { CatsGrid } from "./components/CatsGrid";
const RandomCatApp = () => {
return (
<div className="catContainer">
<h1>Random kittens</h1>
<button onClick={'Some code here'} className="catBtn">
Generate random kitten
</button>
<CatsGrid />
</div>
);
};
export default RandomCatApp;
The button must refresh component to show new images from the API.
CatsGrid component works fine, I just tested it. My problem is with the "onClick" and useState or something else in the code above.
Here is CatsGrid component just in case:
import React, { useState, useEffect } from "react";
export const CatsGrid = () => {
const [imagen, setImagen] = useState([]);
useEffect(() => {
getCats();
}, []);
const getCats = async () => {
const url = "someApiKey";
const resp = await fetch(url);
const data = await resp.json();
const catImg = data.map((img) => {
return {
id: img.id,
url: img.url,
};
});
setImagen(catImg);
};
return (
<div className="imgContainer">
{imagen.map(({ id, url }) => (
<img className="catImg" key={id} src={url} alt="" />
))}
</div>
);
};

Answer 1

Ok, assuming the fetch in getCats in CatsGrid always returns a new set of data then I suggest just using a React key on the CatsGrid component so React will unmount/mount a new instance of it. When the React key changes React will interpret this as a new component to render.
const RandomCatApp = () => {
const [catsKey, setCatsKey] = React.useState(0);
return (
<div className="catContainer">
<h1>Random kittens</h1>
<button
onClick={() => setCatsKey(key => key + 1)}
className="catBtn"
>
Generate random kitten
</button>
<CatsGrid key={catsKey} />
</div>
);
};