Olá pessoal,
Alguém me ajude por favor, estou tentando fazer um projeto em ReactJS para treinar e estou tendo dificuldades. Estou consumindo uma API externa, mas não estou conseguindo usar o onClick do botão:
import { useEffect, useState } from "react";
export function PetGenerator() {
const [getRandomCat, setGetRandomCat] = useState([]);
const [getRandomDog, setGetRandomDog] = useState([]);
useEffect(() => {
fetch("https://aws.random.cat/meow")
.then((res) => res.json())
.then((data) => {
cat_result.innerHTML = `<img src=${data.file} alt="cat" />`;
});
}, []);
useEffect(() => {
fetch("https://random.dog/woof.json")
.then((res) => res.json())
.then((data) => {
if (data.url.includes(".mp4")) {
getRandomDog();
} else {
dog_result.innerHTML = `<img src=${data.url} alt="dog" />`;
}
});
}, []);
return (
<>
<div className="container">
<h1>Pet Generator</h1>
</div>
<div className="results">
<div id="cat_result" className="result">
<p>Random Cat Placeholder</p>
</div>
<div id="dog_result" className="result">
<p>Random Dog Placeholder</p>
</div>
</div>
<div className="buttons">
<button id="cat_btn" onClick={getRandomCat}>
Get Cat
</button>
<button id="dog_btn" onClick={getRandomDog}>
Get Dog
</button>
</div>
</>
);
}
Sei que o código não está bom, se alguém puder me dar dicas eu agradeço. É para consumir images randômicas.