Skip to main content
Jonathan_Hooper
Apr 29, 2024 2:05 PM UTC
Solved

Can a parent component's properties control the properties of a nested component instance?

I’m wondering if there’s a way to do this using variables (or any other means). Here’s what I’m trying to achieve in practice:

I have a NavItem component with a nested instance of an Icon component from an icon library. The Icon component has its own variants, such as a boolean property that makes the icon filled rather than having a stroke.

On the NavItem component, I’ve created a boolean prop call IconType and tied it to the icon, in order to swap out various component instances. No problem there. But here’s the question:

Say I want to give NavItem the boolean prop Active=true/false, and when NavItem is active then I want its nested icon to automatically display as the Filled=true variant.

As far as I’m aware, there’s no way to do this without creating a separate IconType boolean property, called something like IconType-Filled. But this means every time I’d switch Active on/off on my NavItem component, I have to go back and re-select the desired icon instance—since now there are two separate icon props.

I hope this is clear. It’s a very simple functionality, but a little hard to explain. To summarize:

Can the properties of a nested component instance be controlled by its parent component properties using variables (or any other method)?

Thanks in advance!

This topic has been closed for replies.
Antoine
AntoineSolution
Active Member
Apr 29, 2024 2:35 PM UTC

You can’t. You need to create a variant of your NavItem.

3 replies

Antoine
AntoineSolution
Active Member
Apr 29, 2024 2:35 PM UTC

You can’t. You need to create a variant of your NavItem.

Jonathan_Hooper
Apr 29, 2024 2:54 PM UTC

Ok, thought so. In this scenario it wouldn’t require that many variants, so I suppose this is still the best workflow.

Antoine
Active Member
Apr 29, 2024 3:26 PM UTC

Hypothetically you could create a string variant to control your icon state property with two modes (on and off). You could then switch the mode on the parent which would change the icon. But I don’t recommend it.