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?

Answer 1

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>