Cannot manipulate children of some page elements using render method

I need to manipulate the children of some of my page elements using the render method https://docs.plasmic.app/learn/react-api/
I can access the children with no problem when the element is declared within the page (vegetables). But if my element is declared as a component (fruits), then the children are not accessible (I think it use to be accessible :thinking_face:)

@plasmicapp/loader-gatsby: tried 1.0.179 and 1.0.203
gatsby: 4.16.0
react: 18.2.0

image.png

image.png

Hello @mighty_donkey. This is because fruits is not receiving anything in props.children. Since it’s a component, you can only change it by using it’s props. To make this work, you can create a slot inside fruits called children, and then you would have access to it.

Indeed! I got mixed up!

Though there is still an issue when several components share the same name in a page.

Everything works fine when only one instance of fruits is present in my page (first pictures)
When two instances of fruits are present in my page, the render method is not called at all and my components are displayed on the page while it shouldn’t (last pictures).

image.png

image.png

image.png

When there are multiple components of the same name, you need to double click the element in the tree or in the right panel and rename it. Then, you’ll be able to access it in code by the name you gave it

Yes I noticed that. Though, I’d like to apply the same treatment to all the instances of the same component on my pages. Without having to anticipate different names for different instances. Is it possible?

Hmm. Usually you would change the component itself, since this is a change to all the instances

I’m not using codegen. How would I change the component itself for my entire project?

So, you can substitute one of plasmic components with one in code by using the PLASMIC.substituteComponent API. But maybe your change can be done in Plasmic itselft, and not need any changes in code

What are you trying to achieve?

I substitute part of my component with a slider implementation I have in my codebase. It takes slot children, turn them into slides and wrap them in the slider

When you substitute a component, it receives all the props the plasmic component would get already

So, if you SliderPlasmic component has a children prop, your SliderCode component would receive the same children prop when rendering

You might also want to consider registering the Slider instead of substituting it, so you can visually edit it in Studio :smile:

Ok thank you, now I know the different approaches for my problem :slightly_smiling_face: