How can I access the props of a component created by Plasmic Studio from codeGen?

Developer Support
1

I have made a list component in Studio and I know how to assign data to override it and render it In my codegen, but when an object in the component is clicked, a prop named “theValue” will be assigned the clicked value. The problem is that I am unable to access this props “theValue” in my code.
when I use ‘this.props.theValue’, that is ‘undefine’.
I can access “theValue” in studio, but do not know how to access “theValue” of the synced compontent in my code

2

Hey Polo,
This is more like a React question so I have written my explanation below.

The component we have access to (not the Plasmic codegen component) is in our control, it wraps the Plasmic codegen component and you are responsible to pass your prop data from that parent component into the Plasmic component.

You assign prop theValue from your parent React component to your Plasmic codegen component, when clicking a button in your Plasmic, you want to mutate that theValue, you will need to pass it back through another callback prop.

I have written the code below to illustrate my point

function ParentComponent() {
    const [theValue, setTheValue] = useState('the value');
    const onButtonClick = (newValue) => {
          setTheValue(newValue)
    };

    return <PlasmicChildComponent theValue={theValue} onButtonClick={onButtonClick} />
}

// Assuming this is the onClick function you assign to your Button through Plasmic Dynamic Value
onClick = () => {
     const {theValue, onButtonClick} = $props;
     const newValue = theValue + ' : is a new Value';
     
     if (onButtonClick) {
           onButtonClick(newValue)
     }
}

Hope it helps

1 Like
3

Thank you, your explanation is great. Look like I need to understand more about the concepts of React. Thanks again for your patience.

4

No worries, I’m glad it helps