How to not render element if it's null?

Question

I want to render news feed. Articles can have titles, pictures, and author names. I render it like this:

render() {
    const newsItem = (article, id) => (
      <article className="news-item" key={id}>
        <img className="news-picture" src={`${article.urlToImage}`} alt=""/>
        <h1 className="news-title">{article.title}</h1>
        <p>Author: {article.author}</p>
      </article>
    );

    const newsFeed = this.state.news.map(e => newsItem(e, pushid()));

    return (
      <div className="news-feed">{newsFeed}</div>
    );
  }
}

Some times API doesn't give author names (the value is null), and if so, I don't want to render

<p>Author: {article.author}</p>

How is it done correctly in react?

What you mean by null. Empty string or actual null?

Maheer Ali
– Maheer Ali

2019-04-16 13:12:15 +00:00
Commented Apr 16, 2019 at 13:12 — Maheer Ali
– Maheer Ali, Commented Apr 16, 2019 at 13:12

Ertan Hasani · Accepted Answer · 2019-04-16 13:12:22Z

4

Try this:

{article.author && <p>Author: {article.author}</p>}

This means that if article.author exists or is not null then render <p>...</p>.

This is the same as it would have been with an if statement, except that you can't write if statements here. This is the equal of that.

if(article.author) return <p>Author: {article.author}</p>

edited Apr 16, 2019 at 13:12

answered Apr 16, 2019 at 13:08

Ertan Hasani

1,78316 silver badges27 bronze badges

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

2 Comments

Ertan Hasani Over a year ago

@MaxPopov just updated the answer with the explanation

Maksym Popov Over a year ago

thanks, I know how does && work. just needed to know, how to implement it in the right way in react. Thankfully, now i know that I need to use { }

Code Maniac · Accepted Answer · 2019-04-16 13:13:53Z

3

Just check existence with short circuiting &&

{ article.author &&  <p>Author: {article.author}</p> }

How it works ?

x && y
|
|___________ if x true move ahead and execute `y` else don't

edited Apr 16, 2019 at 13:13

answered Apr 16, 2019 at 13:08

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Comments

Rahul Rana · Accepted Answer · 2019-04-16 13:27:18Z

0

render() {
const newsItem = (article, id) => {
  if (!article.author) {
    return null;
  }
  <article className="news-item" key={id}>
    <img className="news-picture" src={`${article.urlToImage}`} alt=""/>
    <h1 className="news-title">{article.title}</h1>
    <p>Author: {article.author}</p>
  </article>

};

const newsFeed = this.state.news.map(e => newsItem(e, pushid()));

return (
  <div className="news-feed">{newsFeed}</div>
);

} }

Just put the if condition as mentioned above. So that if it is null you can return null.

answered Apr 16, 2019 at 13:27

Rahul Rana

4652 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to not render element if it's null?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related