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>
    )
  }
}

Is the form in the same file at the API call? If so, you should be using this.state.value instead of this.props.imgUrl If you passed it as a prop to a child component, it will be helpful to see how you did that. — AdamHinckley, Mar 03 '20 at 06:04
can you share the `response.json`? also you are not subscribed to state changes to see the updates. — Jai, Mar 03 '20 at 06:06
How are you gluing both components? Seem like you are saving the image url into `const imgUrl`. But not using / passing it anywhere. — MjZac, Mar 03 '20 at 06:07
@AnishArya I've updated the code so I don't get an error. The console.log returns the exact url I need to pass to the img src in the form. — EvanPoe, Mar 03 '20 at 20:22
@AdamHinckley yes the form is in the same file. I'll edit the OP to show the App.js in case that is helpful. — EvanPoe, Mar 03 '20 at 20:22
@Jai I'll updated the OP to show the simpler code and the response. — EvanPoe, Mar 03 '20 at 20:22

score 2 · Accepted Answer · answered Mar 03 '20 at 20:41

2

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

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

answered Mar 03 '20 at 20:41

EvanPoe

123
1
10

score 0 · Answer 2 · answered Mar 03 '20 at 06:14

0

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
        })
      })

answered Mar 03 '20 at 06:14

atadnmz

291
2
10

He did not put entire code so I am able to check this part. And the problem seems not passing the data but fetching. – atadnmz Mar 03 '20 at 06:40
See, OP is trying to get the property from the props then how come this will solve the issue? Still OP needs to subscribe to state. – Jai Mar 03 '20 at 07:27

Anish Arya · Answer 3 · 2020-03-03T06:16:32.393

-1

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" /> :
""
}

edited Mar 03 '20 at 06:16

answered Mar 03 '20 at 06:08

Anish Arya

518
1
7
24

Won't work. This code has some flaws which will cause in some error. – Jai Mar 03 '20 at 06:11
@Jai What flaws? – Anish Arya Mar 03 '20 at 06:14
1

Check closely you have answered it. You forgot something i need you to see that. – Jai Mar 03 '20 at 06:15
1

@Jai You should point out the mistakes if there is something, rather than nitpicking. – MjZac Mar 03 '20 at 06:17
@MjZac It is something poster should understand if you don't have enough information available then ask OP to provide that but throwing arrows in dark to hit the bull's eye is happening here in this question. – Jai Mar 03 '20 at 06:19
@AnishArya you are not subscribed to state. That is the mistake and if we see OP's code then your provided answer still won't work for him because we don't have enough details. – Jai Mar 03 '20 at 06:21

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

3 Answers3