Распространение реквизита в список компонентов

Question

Я пытаюсь отправить кучу реквизитов в Компонент.

В console.logs я заметил, что все работает так, как я ожидал, каждый объект имеет правильное значение, каждая операция распространения работает.Но мои карты не отображаются на странице.Это правильный путь?

        return ( 
            <div>
                {this.state.articles.forEach((card) => {
                    <ArticleCard {...card} />
                })}
            </div>
        )

Изображение, показывающее проблему

Answer 1

Array.forEach ничего не возвращает. Вам нужно использовать Array.map. Также вы должны возвращать компонент, который будет отображаться в обратном вызове.

return ( 
  <div>
      {this.state.articles.map((card) => (
          <ArticleCard {...card} />
      )}
  </div>
)

Answer 2

Вместо использования forEach, вы должны использовать функцию map для массива и с ключевым словом return для возврата каждого ArticleCard

return( 
<div>
  {this.state.articles.map((card) => {
    return <ArticleCard {...card} />
  })}
</div>
)