Displaying an image from an API In React

Question

I am trying to display the image of the breed selected by the user in this code but it is not working,

any ideas or hints as of why?

Thank you

import React, { useState, useEffect } from 'react';
import './breed-image.css';

function BreedImage () {
    const [breed, selectedBreed] = useState('');

    useEffect(() => {
        fetchImage();
        }, []);

    const fetchImage = async () => {
        const res = await fetch(`https://dog.ceo/api/breed/${breed}/images/random`)
        const data = await res.json();
        const imageUrl = data.message
        selectedBreed(imageUrl);
        };

    return (
      <div className="image-container">
        <img className="image-card" src={breed} alt="doggopicture" />
      </div>
    );
  
}

export default BreedImage;

dave · Accepted Answer · 2022-07-08 21:16:47Z

There's some weird logic in here that doesn't make sense. breed is initialized to an empty string. Then, in your useEffect you have an empty dependencies array, which means it will be called once. Which means your API request hits https://dog.ceo/api/breed//images/random which presumably would fail (since breed was '').

Most likely you instead want:

import React, { useState, useEffect } from 'react';
import './breed-image.css';

function BreedImage () {
    const [breed, setBreed] = useState('');
    const [url, setUrl] = useState('');

    useEffect(() => {
        fetchImage();
    }, [breed]);

    const fetchImage = async () => {
        const res = await fetch(`https://dog.ceo/api/breed/${breed}/images/random`)
        const data = await res.json();
        setUrl(data.message);
    };

    return (
    <>
      <DogPicker onChange={(breed) => setBreed(breed)} />
      <div className="image-container">
        <img className="image-card" src={url} alt="doggopicture" />
      </div>
    </>
    );
  
}

export default BreedImage;

where you'd pass setBreed to some other component. Or, you could pass breed down to this component as a prop, and again use useEffect to watch for changes.

Collectives™ on Stack Overflow

Displaying an image from an API In React

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related