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

Ask the community
, , ,
1

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!

2

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

3

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

4

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.