React: Trying to access json from fetch, then pass that result to JSX

Question

Everything here is in the Dropdown file. I'm wanting to grab the response.json (which is a url to a jpg) then pass that to the image at the bottom of the return. I followed these previous questions but still can't get it working. Return the result value with fetch call function from another page, React native

I'm fetching (in App.js) the dog breeds as a list and running that in the {options} which creates a dropdown box with each breed listed(https://dog.ceo/api/breeds/list/all). Then, the goal is to click one breed and send a second api call to get the jpg address for that specific breed(https://dog.ceo/api/${value}/hound/images/random). With the current code, I'm receiving the correct response: Object { message: "https://images.dog.ceo/breeds/akita/512px-Ainu-Dog.jpg", status: "success" }

So now I need to pass that value down to the form.

export class Dropdown extends Component { 
    state = {
        value: 'None'
    }

    handleClick = (e) => {
        e.preventDefault();

        const { value } = e.target;
        const endpoint = `https://dog.ceo/api/breed/${value}/images/random`;
        fetch(endpoint)
            .then((response) => response.json() )
            .then((result) => {
                console.log(result) //returns the correct address I need
                this.setState({
                    value: result
                })
            })

    }

    render() {
        const options = Object.keys(this.props.breeds).map((breed) => {
            const name = breed;

        return (

            <option value={name}>{name}</option>
        )
    });

        return (
            <div>
                <form>
                    <label htmlFor="breed">Select a Breed</label>
                    <select name="breed"
                    value={this.state.value}
                    onChange={this.handleClick}
                    >

                        <option value="None">Select one...</option>

                        {options}
                    </select>
                </form>
                <img src={this.state.value} alt="dog selected by breed" />              
            </div>

Here is App.js if that's helpful

export default class App extends Component {

  state = {
    breeds:[]
  }

  componentDidMount() {
    // fetch all the breeds and update breeds state
    fetch('https://dog.ceo/api/breeds/list/all')
      .then(res => res.json())
      .then(
        (result) => {
        this.setState({
          isLoaded: true,
          breeds: result.message,
          })
         });
       }

  render() {
    return (
      <div>
        <Dropdown breeds={this.state.breeds} />
      </div>
    )
  }
}

Answer 1

I'm dumb. I figured it out. It's working now.

<img src={this.state.value.message} alt="dog selected by breed" />

Answer 2

try this:

inside constructor:
this.setState({
  hasImageLoaded: false
});

and in handleClick

fetch('your api url')
.then((response) => response.json())
.then((findresponse) =>{
    this.setState({
    imgUrl: findresponse.message,
    hasImageLoaded: true
  });
})

and inside return:

{
 this.state.hasImageLoaded ?
 <img src={this.props.imgUrl} alt="dog selected by breed" /> :
""
}

Answer 3

I checked your response and to show image you do not need to get json format. response.url includes what you need for image

     fetch(endpoint)
      .then((response) => {
        this.setState({
          value: response.url
        })
      })