Output recived data to React

#1

Hi can someone help me to output the recived data from server.

import React, { Component } from “react”;
import axios from “axios”;

class App extends Component {
state = {
data: []
};

componentDidMount() {
axios
.get(“https://api.thecatapi.com/v1/images/search?breed_id=beng”, {
headers: {
“x-api-key”: “valid api key”
}
})
.then(res => {
this.setState(
{
data: res.data[0]
},
() => console.log(this.state)
);
})
.catch(err => {
console.error(err);
});
}
render() {
return

{this.state.name}
;
}
}

export default App;

#2

You’re returning this.state.name not this.state.data in your render function

#3

Oops…I will try after my job to output this.state.data.name

#4

Don’t forget to swap “valid api key” for the API key you received from the welcome email too, otherwise you’ll just get an empty array.

#5

I got from “https://api.thecatapi.com/v1/breeds?limit=10” first ten cats but i dont know how to get images from first ten cats.

#6

The ‘Seach by Breed’ page in the documentation gives a good example & source code (although it’s Vue not React) - https://docs.thecatapi.com/example-by-breed

Just take the ‘id’ of the breed you want images for, and add it as the ‘breed_ids’ query parameter when using the images/search method.

So for Bengal cats the id is ‘beng’ - so this url would just return Bengal cat images.

#7

I don’t know how to change breeds id in componentDidMount.
My code in componentDidMount is:

componentDidMount = () => {
axios.defaults.headers.common[“x-api-key”] = “API KEY IS VALID”;

axios
  .all([
    axios.get("https://api.thecatapi.com/v1/breeds/"),
    axios.get("https://api.thecatapi.com/v1/images/search?breed_ids=beng")
  ])
  .then(
    axios.spread((res1, res2) => {
      const cats = res1;
      const img = res2;
      this.setState(
        {
          cats: cats.data,
          img: img.data,
          dataLoaded: true
        },
        () => console.log(this.state)
      );
    })
  );

};

Im new to React.

#8

No worries at all, I’ve created a quick example of how to create a <select element, and fill it with all the Cat breeds, and then show 5 images of that Breed when selected.

Just replace you App.js contents with this and it should run straight away (the App.css file just has a class to make the images smaller)

As you’re learning React, i’d recommend going straight to Await/Async and not bothering with the old callback way of doing things (.all / .then etc)

To create this i simple ran the react new project creator (npx create-react-app), and edited the App.js file.

#9

Thank you for the help.