Hi,
I would like to know how to lift state and share the state between components within a page. Let’s assume that I have two checkboxes I’d both change state if I manually change a state of one. Based on the React guidelines, I should remove the state within a checkbox and lift it to the first shared component. But I am unable to delete a pre-defined (for checkbox) state variable. Any help would be much appreciated.
Hi,
You can achieve that, in the data tab you can create the states that you want, then in the Checkbox you can change the setting to:
- bind dynamically the value of is checked property
- indicate that when the value of the Checkbox is changing it should change the value of the state that you created
Here are some images to help:
1 Like
Ok, I think I get it. But what about the case when such checkbox (or any other actionable element I want to assign a shared state to) is nested within a reusable component. Or worse, is nested in a component that is a part of another component. How do I do this in such case?
You can register any state that you have and export it to outside of the component, this should help in you cases that you have a nested component with state, but for more complex applications this may not be the best solution, one alternative is to register a Global Context with both the data and actions that you need Global Contexts | Learn Plasmic
Can a Global Context be registered in the Plasmic Studio or does it have to be made on my local machine in code?
It’s required to be done in code with an app host Host Plasmic Studio in your app | Learn Plasmic