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

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:

CodePudding user response：

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.

CodePudding user response：

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