How to catch props transfer error?

Question

React

The page has cards with photos and names. The card component looks like this:

import Image from './Image';

function Card({ getCard, card }) {

  function handleClickImage() {
    getCard(card);
  }

  return (
    <li className="element">
      <button type="button" className="element__trash-button" />
      <Image
        onClick={handleClickImage}
        src={card.link}
        alt={card.name}
        className="element__image"
      />
      <div className="element__container">
        <h2 className="element__title"> {card.name} </h2>
        <div className="element__like-group">
          <button type="button" className="element__like" />
          <h3 className="element__like-counter"> {card.likes.length} </h3>
        </div>
      </div>
    </li>
  );
}

export default Card;

Clicking on the picture opens a popup with a larger image and a caption below. The component looks like this:

import Image from './Image';

function ImagePopup({ card, onClose }) {

  return (
    <section className={`popup ${card && 'popup_opened'}`}>
      <div className="popup__zoom-image">
        <button onClick={onClose} type="button" className="popup__button-close" />
        <Image
          src={card ? card.link : null}
          alt={card ? card.name : null}
          className="popup__image"
        />
        <h2 className="popup__title-zoom-image"> {card ? card.name : null} </h2>
      </div>
    </section>
  );
}

export default ImagePopup;

Here I'm setting src and alt to null until our popup is closed and the card hasn't been submitted.

And this is what the image component itself looks like:

import { useState } from 'react';
import filler from '../images/filler.jpg';

function Image({ src, alt, onClick, className }) {

  const [isLoadError, setIsLoadError] = useState(false);

  function handleLoadError() {
    setIsLoadError(true);
  }

  return (
    <img
      onClick={onClick}
      src={isLoadError ? filler : src}
      alt={`Фото: ${alt}`}
      className={className}
      onError={handleLoadError}
    />
  );
}

export default Image;

The bottom line is this: if there is an error in the image, we translate the state to true and show a stub or show the photo itself, if everything is ok.
When the page loads, all the broken photos are replaced with a stub and everything is fine. When you click on the pictures, everything opens, but once you open the wrong image, after that, instead of any enlarged image, a stub appears. In this case, a normal card is transferred to the props card.

In which direction to dig, what can cause it?

Answer 1

what could be causing this?

The fact that the value of isLoadError only changes from false to true. You have to bring it back somehow.
You can monitor the value of src, if it has changed, set it to false: Another option is to recreate an instance of the Image component in ImagePopup when the card data changes, specifying the appropriate key:
useEffect(() => setIsLoadError(false), [ src ]);
<Image key={card ? card.link : 'hello, world!!'}