I’m having an issue with updating the state of a component while keeping the new text intact. Here’s a breakdown of what’s happening in my example:

In two out of the three cases, the behavior is as expected. The component updates, and the text remains as it should. However, in the third case, the issue arises. When I click the button, the text from the original component is displayed instead of the updated text.

To clarify further:

• In the first version, the component is used directly. The state changes, and the text stays as intended.


• In the second version, the component is nested, but it still works correctly.


• In the third version, the issue occurs. The text of the original component is shown after clicking the button.

The strange thing is, if I manually update the component’s state, it works fine (instead of a ‘set variable’ event when clicking the button). But for some reason, when relying on the component’s internal state, the updated text isn’t retained.

Any ideas on what might be causing this? Thanks in advance for your help!