Использование && при render в реакт?

Question

[Марат Иванов]

Привет!

Как для самых начинающих, поясните, пожалуйста, какую роль играет здесь &&?
{ news && news.map(newsItem =>....

Контейнер:

class News extends React.Component {
  state = {};
  componentDidMount() {
    const url =
      "https://newsapi.org...";
    fetch(url)
      .then(responce => responce.json())
      .then(m => this.setState({ news: [...m.articles] }));
  }
  render() {
    const { news } = this.state;
    return (
      <Wrapper>
        <div style={{ width: "100%" }}>
          <Typography variant="h2" component="h1" gutterBottom>
            Новости
          </Typography>
        </div>

        { news &&
          news.map(newsItem => (
            <Card
              title={newsItem.title}
              key={
                new Date(newsItem.publishedAt).getTime() - Math.random() * 25
              }
              urlToImage={newsItem.urlToImage}
              description={newsItem.description}
            />
          ))}
      </Wrapper>
    );
  }
}
export default News;

Answer 1

[Владимир]

В данном случае блок выедется только если news не undefined, не равен null или 0

news.map(newsItem => (
            <Card
              title={newsItem.title}
              key={
                new Date(newsItem.publishedAt).getTime() - Math.random() * 25
              }
              urlToImage={newsItem.urlToImage}
              description={newsItem.description}
            />
          ))

гуглите react conditional rendering

Comments

[Кирилл]

лучше почитайте про логические операторы в javascript, для начала и лишь потом про react conditional rendering =)
learn.javascript.ru/logical-ops#i

Answer 2

[Андрей Hecc]

Если news будет не undefined/null , то будет отрисованая вторая часть выражения.
Conditional Rendering
React Conditional Rendering
Это достаточно распостранненый паттерн, который используют когда есть одно условие на основе которого нужно отрисовать какой-то блок.
Первую часть можно заменить на любое другое выражение:
news.length !== 0 && <List />

Что бы не делать вот так:

{
news ? <List data={news} /> : null
}

Упрощают до
news && <List data={news} />

Comments

[Марат Иванов]

спасибо за полное и простое объяснение. а то многие которые это знают начинают выпендриваться)))) спасиб!