Child stops updating state after updating parent's state

[Alex-Sichkar]

Hi @samwillis,

Example to reproduce:

@default.register
class Parent(Component):
    state = True

    @public
    def toggle(self):
        self.state = not self.state

    template: django_html = """
    <div {% ... attrs %}>
        <div>Parent State: {{ state }}</div>
        <button @click="toggle()">Toggle</button>
        <div>
            {% @ child / %}
        </div>
    </div>
    """

@default.register
class Child(Component):
    state = True

    @public
    def toggle(self):
        self.state = not self.state

    template: django_html = """
    <div {% ... attrs %}>
        <div>Child State: {{ state }}</div>
        <button @click="toggle()">Toggle</button>
    </div>
    """

https://user-images.githubusercontent.com/1922086/177634382-a0b1d5a2-8cf3-4ddf-9b29-9e6835e08286.mp4

Maybe I'm doing something wrong...

[samwillis]

Hi @Alex-Sichkar,

I think it's that you haven't set a key on the clild component component, it's needed to keep track of the component instance when they are nested.

See the counter example on the homepage: https://www.tetraframework.com

I should add that to the docs!

[samwillis]

Something like this:

@default.register
class Parent(Component):
    state = True

    @public
    def toggle(self):
        self.state = not self.state

    template: django_html = """
    <div {% ... attrs %}>
        <div>Parent State: {{ state }}</div>
        <button @click="toggle()">Toggle</button>
        <div>
            {% @ child key='inner-counter' / %}
        </div>
    </div>
    """

[Alex-Sichkar]

Yes, that worked, thank you!

[samwillis]

No worries, let me know how you get on!