How to render a dynamic list of Plasmic components?

Hi guys,
You’ve built an amazing thing here! Very non developer focused and ultra friendly! Went trough the levels and watched the video but am still unclear on one crucial piece of the puzzle for developers.

Scenario:
We have a homepage that we need to render testimonials on. Very simple array containing objects needs to be a passed into the homepage as a prop and then the homepage should render all 10 items. MiniTwitter shows this with

<PlasmicFeed {...rest} postList={{children: entries.map((entry) => ( <Post timestamp={moment(entry.createdAt).fromNow()}> {entry.content}</Post>)),}}/>

however, I’m unclear what do I need to do in plasmic GUI to make the feed accept testimonialList and connect it with the Testimonial component such that it knows that when I pass it testimonial list like above, it should render that exact component. An the question that poses itself afterwards is how can we have many of these pushed into a homepage component e.g. testimonials, highlighted products, etc.

My 2 cents on the docs would be to record a video that shows not only design part but also porting and implementation in each of the supported export frameworks, it’s a couple of hours of work per framework but will increase your developer satisfaction massively cause I don’t think you can make marketing more happy :partying_face:

Cheers :beers:

Hi Uros,
I think I can help you in this regards. Plasmic Docs for Mini Twitter has the related Project ID shared in the docs. If we open that project and go to the /feed page. You will notice that they have a vertical box with name post list

Project ID: https://studio.plasmic.app/projects/gT4hmyT4Gfq9iSDYjENowj

So this is what happened in the code if you want to use that container to override it’s content.

  1. post list is converted to camelCase i.e postList and it’s available as a prop on that component.
  2. We can override it’s content using children prop as you have shared for Feed component above.
  3. Rest is just Reactjs
    Similarly, you can create a horizontal/vertical box for highlighted products. It will be available in the code as follow
  4. highlighted products converted to highlightedProducts
    That being said, we have other options as well. i.e the concept of slots.
    https://docs.plasmic.app/learn/slots/

Let me know if that helps and if you have any specific questions.

@zonal_mammal this is exactly the part that I was missing:

So this is what happened in the code if you want to use that container to override it’s content.

  1. post list is converted to camelCase i.e postList and it’s available as a prop on that component.
  2. We can override it’s content using children prop as you have shared for Feed component above.
  3. Rest is just Reactjs
    Thank you for this and please add it to the developer docs because this makes all the sense but for some reason it is not ultra intuitive at the first glance :slightly_smiling_face:

and kudos for being so responsive

Agreed, developer docs needs a bit of a guided tutorial rather than a reference. A video would be a great addition too!