React API imagem

Oi, Carla!

Você estava no caminho certo, com alguns poucos ajustes consegui colocar pra funcionar, veja:

import { useEffect, useState } from "react";

export function PetGenerator() {

  // aqui controlamos o estado do componente
  // quando esses valores mudarem, queremos que o React renderize novamente o componente
  const [randomCat, setRandomCat] = useState();
  const [randomDog, setRandomDog] = useState();

  // uma função que obtem o gatinho e seta o valor no estado
  const obterGatinho = () => {
    fetch("https://aws.random.cat/meow")
      .then((res) => res.json())
      .then((data) => {
        setRandomCat(data.file)
      });
  };

  // uma função que obtem o doguinho e seta o valor no estado
  const obterDoguinho = () => {
    fetch("https://random.dog/woof.json")
      .then((res) => res.json())
      .then((data) => {
        setRandomDog(data.url)
      });
  };

  return (
    <>
      <div className="container">
        <h1>Pet Generator</h1>
      </div>
      <div className="results">
        <div id="cat_result" className="result">
          <p>Random Cat Placeholder</p>
          {/* aqui só queremos exibir o img se existir valor no randomCat, se não houver não exibimos nada */}
          {randomCat && <img src={randomCat} alt="Um gatinho aleatório"/>}
        </div>
        <div id="dog_result" className="result">
          <p>Random Dog Placeholder</p>
          {/* aqui só queremos exibir o img se existir valor no randomDog, se não houver não exibimos nada */}
          {randomDog && <img src={randomDog} alt="Um doguinho aleatório"/>}
        </div>
      </div>

      <div className="buttons">
        <button id="cat_btn" onClick={obterGatinho}>
          Get Cat
        </button>
        <button id="dog_btn" onClick={obterDoguinho}>
          Get Dog
        </button>
      </div>
    </>
  );
}

export default PetGenerator

Mas lembre-se que existem várias formas de se fazer isso, então você pode sempre ir evoluindo e melhorando.

Bons estudos!

Muito obrigada, professor! Consegui executar o código com os ajustes citados.