React: image src is not taking path via API. image is undefined

Question

I'm new to Reactjs. I'm unable to extract image url from the API. I'm really sorry if similar type of threads already exist in stackoverflow. Full code is below. The API I used is: https://api.thecatapi.com/v1/breeds

import React, { Component } from "react";
import ReactDOM from "react-dom";

const Cat = ({
  cat: {name, image},
}) => {
  return(
    <div className='catMain'>
      <div className='catImage'>
        <img src={image.url} alt={name} />
      </div>
    </div>
  )
}

class App extends Component {
  state = {
    data: [],
  };
  componentDidMount() {
    this.fetchCatData();
  }
  fetchCatData = async () => {
    const url1 = "https://api.thecatapi.com/v1/breeds"
    const response = await fetch(url1)
    const data = await response.json()
    this.setState({
      data,
    })
  }
  render() {
    return (
      <div className='main'>
        <div className="cats">
          <div className="catsInfo">
            {this.state.data.map((cat) => (
              <Cat cat={cat}/>
            ))}
          </div>
        </div>
      </div>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

If you want to display every cat even though they might not have an image, you can do this:

const Cat = ({ cat: { name, image } }) => {
  return (
    <div className="catMain">
      {image && (
        <div className="catImage">
          <img src={image.url} alt={name} />
        </div>
      )}
    </div>
  );
};

Then you can just display whatever else you want about the cat, without having to worry about image issues.

Answer 2

You have an assumption that every cat has an image, that's not the case, therefore you can filter empty images beforehand (there are tons of solutions, conditional rendering can be done too):

// cat.image is an object, which is truthy value therefore you can filter by it.
this.state.data.filter(cat => cat.image).map(cat => <Cat cat={cat} />)

// OR, conditional rendering
this.state.data.map(cat => cat.image && <Cat cat={cat} />)

// Or in the component itself, etc.
const Cat = ({ cat: { name, image } }) => {
  return image ? (
    <div className="catMain">
      <div className="catImage">
        <img src={image.url} alt={name} />
      </div>
    </div>
  ) : (
    <Placeholder />
  );
};