Как динамически отображать карты в React Semantic UI

Я сопоставил свой магазин избыточности с реквизитом, но теперь у меня проблемы с его динамическим рендерингом. Я также пробовал синтаксис projectCards(){...}, но это был полный выстрел в темноте. Мои журналы консоли показывают, что объекты проходят так, как я хочу. Я также пытался использовать projects.map, но не думаю, что хочу помещать возвращаемые значения в новый массив. Я просто хочу больше элементов <Card/> на странице, отображаемых динамически. Где я ошибся? Любая помощь будет оценена по достоинству.

Class Projects extends...
.
.
.
 projectCards = () => {
  if ( this.props.projects.length !== 0 ) {
   this.props.projects.forEach((project) => {
     return <Card fluid color='green' header={project.name} />
  })
 }
}

 render(){
  return(
    <Container>
      <br/>
      <Card.Group>
        <Card fluid color='green' header='Option 1' />
        <Card fluid color='blue' header='Option 2' />
        <Card fluid color='red' header='Option 3' />
        { this.projectCards() }
      </Card.Group>
    </Container>
  )
 }
}