React product card image loading error handling

Easy

You're building a simple e-commerce product card in React. The card shows a loading state while the product image loads, and handles errors if the image fails to load. What's missing in this implementation?

ReactUseeffectImagesError handling

1function ProductCard({ product }) {
  const [imageStatus, setImageStatus] = useState('loading');
  
  // missing code here
  _______________
6
  return (
      <div className="card">
          <div className="image-container">
              {imageStatus === 'loading' &amp;&amp; <LoadingSpinner />}
              {imageStatus === 'error' &amp;&amp; <ErrorIcon />}
              <img 
                  src={product.imageUrl}
                  alt={product.name}
                  className={imageStatus === 'success' ? 'visible' : 'hidden'}
              />
          </div>
          <h3>{product.name}</h3>
          <p>${product.price}</p>
      </div>
  );
22}

You're building a simple e-commerce product card in React. The card shows a loading state while the product image loads, and handles errors if the image fails to load. What's missing in this implementation?

Hint