Unexpected behaviour of nested component on interaction

Hi guys.
I need help with an issue with the components. Here is the overview:

  • I created a button with some properties and used the button to make another component where this component changes state on click. But the output is unexpected.

  • The button has text and icon for which we can swap instances for icon and toggle the icon and the text to show/hide.

  • I created a component using this button. The component initially have only icon present and then on click it hides the icon and shows the text.

But then, this component is not showing the text on click, but hides the icon. The button become blank on click.

The mechanics of the components seems apparently simple. But I am still a learner. I searched the community for solution and I don’t find anything that I can apply.

*I tried reverse engineering the components and observed that the problem arise when I create a variant(while pressing state) for the button. But I cannot understand how to solve it.

I am providing the link to the components here:

Please explain me what is happening and how to solve it.

Thank you.

Hey @Hemanth1, thanks for reaching out!

Everything seems to be in order in your file from what we can see.

Can you try selecting one of the instances, and from the main menu, search quick actions and use ‘Repair selected instances’ with one of your empty instances selected to see if that brings back your expected content?

Thanks for the response.

I tried it now. I cannot exactly see the option you mentioned “Repair selected instances”. However on typing “repair” in quick action search bar, I encountered 3 options.

I applied “repair component set versions” after selecting the instance of the component and it prompted: “updated 0 sate (groups).” The problem still persists.

Thanks for following up. Our technical quality team may be better suited to troubleshoot this. Please reach out to the team directly via this form for help: https://help.figma.com/hc/en-us/requests/new

Be sure to use your Figma account email, include the link to the file, and share it with support-share@figma.com, so they can take a closer look.

1 Like

Thank you.