How to Dynamically Render Cards in React Semantic UI

Question

I've mapped my redux store to props, but I'm now having trouble rendering it dynamically. I've also tried projectCards(){...} syntax, but that was a total shot in the dark. My console logs are showing the objects coming through the way I want them. I also tried using projects.map , but I don't think I want to put the return values in a new array. I just want more <Card/> items on the page, dynamically rendered. Where have I gone wrong? Any help would be appreciated.

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>
  )
 }
}

Answer 1

Try this:

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