Conditional rendering with React when api doesn't return image url

Question

I'm handling data I read from Newsapi.org. The problem is that sometimes I get the news title but the image url returns null.

I did this to do conditional rendering so it shows another image when the return variable is null. It is not showing the replace image when the response is null.

<div class="col-2">
          { article.urlToImage != 'null' ? 

            <a href={article.url} class="thumbnail">
              <img src={article.urlToImage} class="img-fluid" />
            </a>
          : 
            <a href={article.url} class="thumbnail">
              <img src="http://www.publicengagement.ac.uk/sites/default/files/styles/content_width/public/hero/large-crowd-of-people-small.jpg" class="img-fluid" />
            </a>
          }  
</div>

Sorry, but what exactly is the question? Is something not working, or are you just looking for ways to write it in a better way? — DanneManne, Sep 06 '18 at 07:21
change this `article.urlToImage != 'null'` to `article.urlToImage !== null` — oakar, Sep 06 '18 at 07:21
or just `article.urlToImage` it will result in a falsy value if `null` — Sergio Alen, Sep 06 '18 at 07:27
you could use `onError` instead. https://stackoverflow.com/questions/34097560/react-js-replace-img-src-onerror — Sergio Alen, Sep 06 '18 at 07:31

score 1 · Answer 1 · answered Sep 06 '18 at 07:23

'null' is string and you're checking with string. Change 'null' to null object.

{ article.urlToImage != null ?

But, I would simply do like:

<a href={article.url} class="thumbnail">
  <img src={article.urlToImage || 'default-path-of-the-image' } class="img-fluid" />
</a>

This satisfies if the article.urlToImage is null or undefined use the default image default-path-of-the-image otherwise use the image from article.urlToImage.

score 0 · Answer 2 · answered Sep 06 '18 at 07:22

A better code will be :

<div class="col-2">
        <a href={article.url} class="thumbnail">
          <img src={article.urlToImage != 'null'? article.urlToImage : 'http://www.publicengagement.ac.uk/sites/default/files/styles/content_width/public/hero/large-crowd-of-people-small.jpg' } class="img-fluid" />
        </a>     
</div>

Conditional rendering with React when api doesn't return image url

2 Answers2