Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

React API imagem

Referente ao curso React: integrando seu projeto React com APIs, no capítulo Aquela sobre o AlFood e atividade Apresentação

por Carla Fernanda Coutinho Pontes Alves
| 210.2k xp | 35 posts

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.

2 respostas
solução!
por Vinicios Neves
| 1001.4k xp | 1104 posts
Instrutor Tech Lead | Tech Educator

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!

por Carla Fernanda Coutinho Pontes Alves
| 210.2k xp | 35 posts

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