Understanding generated components and props

Developer Support
1

I cant get my head around the created components and their props. When I create a component in Plasmic Studio with the name ‘FilterItem’, I get two components in my react code.
•
•
If I want to use the FilterItem component as a child component in a parent, I think I am suppose to use the . But when I try to overwrite the onClick it is not available as a prop. It is only available on PlasmicFilterItem component. What am I doing wrong/missing?

(I am using Typescript btw.)

E.g.
<PlasmicMainFilter
_root_={{ ref }}
_categoryFilter_={{
title: "Category Filter",
items: categories.map(_c_ => <FilterItem _text_={_c_} _onClick_={() => console.log('click')} />) <-------- onClick is not available here. Only if I use <PlasmicFilterItem onClick ...>
}}
{...props}
/>

2

Hi @melodic_lion, the best place to understand the scheme is here: https://docs.plasmic.app/learn/codegen-components/

You can also check out a concrete app tutorial like https://docs.plasmic.app/learn/todomvc-tutorial/

3

FilterItem is conservative in what props it exposes. It does not default to expose the underlying root element’s props. (By default, we want use of Plasmic to be a design detail of the component, which consumers of the component don’t need to know.) It would be easy to expose that in the interface if you want.

4

Note that the Plasmic* components should typically only be used by its corresponding wrapper component (PlasmicButton should only be used by Button). You should always use the wrapper component (Button) from the rest of your application.
Based on that I assume that I should use in the parent MainFilter.tsx and not use (since this should only be used in the FilterItem.tsx).

To be able to pass the onClick handler in FilterItem I should modify my FilterItem interface like so:

export interface FilterItemProps extends DefaultFilterItemProps {
onClick?: (e: React.MouseEvent) => void;
}
5

Yes exactly; the Plasmic* version of the components should only be used from the “wrapper” component, and you should generally be using the wrapper component instead. You have total freedom in curating the props for the wrapper component.