Cannot read URL property of null, fetching from an API

Question

I have products in JSON format that are fetched and shown in the frontend. In my products.json there is an image URL for each products, but only some have image URLs in them, others are empty. When I am looping the data in react I always get error in my react app saying Cannot read property of null in the <img/> tag, how do I write a logic that only renders the image when there is an image source else just return an empty div?

<ul>
          {this.state.items.map((items, index) => {
            return (
              <li className="ProductList-product" key={items.id}>
                  <h3>{items.title}</h3>
                  <p>{items.description}</p>
                  <div className="price-box">    
                  <p>from: {items.price} $</p>
                  </div>
                  <div>
                  {<img src={items.photo} alt=""/>}
                  {/* {console.log(items.photo.id)} */}
                  </div>
              </li>
                
            );
          })}
        </ul>

The practice is for the child item within the loop to be singular. In your case items=>item — Milos N.
– Milos N., Commented Jan 9, 2021 at 10:30

Hemant · Accepted Answer · 2021-01-09 10:29:38Z

1

replace your

{<img src={items.photo} alt=""/>}

with

{items.photo && <img src={items.photo} alt=""/>}

it will only render img element when item.photo is not null.

answered Jan 9, 2021 at 10:29

Hemant

1,1661 gold badge11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BobVoit · Accepted Answer · 2021-01-09 10:36:30Z

1

You can set a condition. For example:

  <ul>
      {this.state.items.map((items, index) => {
        return (
          <li className="ProductList-product" key={items.id}>
              <h3>{items.title}</h3>
              <p>{items.description}</p>
              <div className="price-box">    
              <p>from: {items.price} $</p>
              </div>
              {items.photo
              ? <div>
                  {<img src={items.photo} alt=""/>}
                  {/* {console.log(items.photo.id)} */}
              </div>
              : <div></div>
          </li>
            
        );
      })}
  </ul>

answered Jan 9, 2021 at 10:36

BobVoit

111 bronze badge

Collectives™ on Stack Overflow

Cannot read URL property of null, fetching from an API

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related