How can i handle the undefined error in React

Question

I am trying to display the data received from the API, the products which contain images are displayed but when I try to paginate, I always receive this error because the other images do not contain images.

i am using Api-platform and this is my json structure

{
   "@context": "/api/contexts/Product",
   "@id": "/api/products",
   "@type": "hydra:Collection",
   "hydra:member": [
       {
           "@id": "/api/products/1",
           "@type": "Product",
           "id": 1,
           "title": "Labore velit unde iste consequatur.",
           "description": "",
           "price": 5644,
           "published": "2019-12-27T04:51:04+01:00",
           "user": {
               "@id": "/api/users/2",
               "@type": "User",
               "username": "manager",
               "phone": "09 54 03 76 16"
           },
           "images": [
               {
                   "@id": "/api/images/1",
                   "@type": "Image",
                   "id": 1,
                   "file": null,
                   "url": "/images/5e2a25820eac1350286144.jpg"
               },
               {
                   "@id": "/api/images/2",
                   "@type": "Image",
                   "id": 2,
                   "file": null,
                   "url": "/images/5e2a258e5afde569450008.png"
               },
               {
                   "@id": "/api/images/3",
                   "@type": "Image",
                   "id": 3,
                   "file": null,
                   "url": "/images/5e2a25988e0b7943696558.jpg"
               }
           ]
       }
}

and this is my code

<div className="row mt-md-5 mt-sm-5" >
    {products && products.map(product => (
        <div className="col-md-3" key={product.id}>
            <div className="card mb-3">
               <div className="card-body">
                    <img src={`http://localhost:8000/${product.images[0].url}`} width="200px"
                         alt="images"
                    />                               
                    <p className="card-title">
                        {product.description}
                    </p>
                </div>
            </div>
        </div>

    ))}

</div>

score 1 · Answer 1 · answered Jan 28 '20 at 17:22

1

Add this to your jsx:

                {product.images && product.images[0] && <img src={`http://localhost:8000/${product.images[0].url}`} width="200px"
                     alt="images"
                /> }

This won't render img if it doesnt exist

answered Jan 28 '20 at 17:22

Kaca992

2,211
10
14

score 1 · Answer 2 · answered Jan 28 '20 at 17:23

1

Check images exists first like so:

{
product.images && <img src={`http://localhost:8000/${product.images[0].url}`} width="200px"alt="images" />    
}

answered Jan 28 '20 at 17:23

William Park

1,697
1
12
17

score 1 · Accepted Answer · answered Jan 28 '20 at 17:24

Hide the image when it is not available.

<div className="row mt-md-5 mt-sm-5" >
    {products && products.map(product => (
        <div className="col-md-3" key={product.id}>
            <div className="card mb-3">
               <div className="card-body">
                 {
                   product.images[0] ?
                   <img src={`http://localhost:8000/${product.images[0].url}`} width="200px" alt="images" /> :
                   null
                  }        
                    <p className="card-title">
                        {product.description}
                    </p>
                </div>
            </div>
        </div>

    ))}

</div>

Happy to help :) Please mark this as an accepted answer so that others don't spend time to resolve this. — Ayushya, Jan 29 '20 at 06:59

How can i handle the undefined error in React

3 Answers3