Output recived data to React


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() {
.get(“https://api.thecatapi.com/v1/images/search?breed_id=beng”, {
headers: {
“x-api-key”: “valid api key”
.then(res => {
data: res.data[0]
() => console.log(this.state)
.catch(err => {
render() {


export default App;


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


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


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.


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.


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.


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.spread((res1, res2) => {
      const cats = res1;
      const img = res2;
          cats: cats.data,
          img: img.data,
          dataLoaded: true
        () => console.log(this.state)


Im new to React.


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.


Thank you for the help.