Ways of component interaction?

Hi, I have a generic question about one component A can trigger changes in another peer component instance B. So one way I figured so far is to use component trigger (one instance A) to set to a global variables, with is also set to the value of a parameter on instance of component B.

But this approach still introduces a global variable, seems defeating the purpose of having components, is that a better approach that let the components talk directly?

Thanks!

If those components are nested then you can drive your child components using either component variables or parent props. I have like 5 nested components in my patent component and everything works so smoothly!!

And there are certainly times you’d want to make use of a global variable especially as an initialization variable or cross over var to global workflows.

Component Triggers are coming soon @aurelie is working on it. She is on a trip now, but even though I can’t be sure, it might appear sooner than you think. There is supposed to be an update at the end of the month, where this might get introduced.

I can see there are component triggers already, but it seems not been able to pass over event value while Im using the trigger? Is that something baking still?

It’s the old implementation, you can trigger actions on stuff like input fields and rich text. You can focus fields etc.

I see, is there a way I can workaround this? Here is my basic use-case, inside a component, when a selector change its value, I would like pass this value to a peer component. Because both components come from another project, so I can’t let it set a global variable internally.

Hm, why don’t you pass this as a context? For example you can add a dropzone and bind it to a value. Then that context will be available and responsive in the dropped in component. Without modifying the components for now I don’t see this as a viable/sustainable thing. Probably you’d need to ask @Profound5753 how he managed to do this. I’d just set it as a context in the main component and that would’ve probably solved your issue here.

Edit: if it’s just a visual thing, you might want to explore states applied to child elements.

1 Like

emmm so far I hasn’t figured out how to expose component variable to outsider…

I think the team is working on it, in the meantime you can use event trigger (tutorial here) or another workaround (tutorial here)