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

Use .map() instead of .forEach(). Some past, helpful StackOverflow answers on this: stackoverflow.com/questions/47442462/…, stackoverflow.com/questions/42460357/… — Andy Taton
– Andy Taton, Commented Oct 2, 2018 at 2:03

Tu Nguyen · Accepted Answer · 2018-10-02 03:17:37Z

1

Try this:

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

edited Oct 2, 2018 at 3:17

answered Oct 2, 2018 at 2:02

Tu Nguyen

10.2k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user4396386 Over a year ago

It worked! So I wanted to return an array of <Card>s?

Tu Nguyen Over a year ago

Got it! However, do you think that it's possible to make the function return value more than one time? After returning the first Card component, it's done! The other Card components won't have a chance to come to life. Btw, why don't you want to return an array of <Card>s

user4396386 Over a year ago

That's a good point. Not the first time I've tried multiple return statements in the same function today!

user4396386 Over a year ago

I can't edit it, but there's a curly missing in your post. Thanks for your help.

Collectives™ on Stack Overflow

How to Dynamically Render Cards in React Semantic UI

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related