How to properly use children in Reacton component

[egormkn]

Hello!

What is the proper way to add children to nested components? I tried to use add_children method but it seems that it runs before the context manager:

import reacton
import reacton.ipywidgets as w


@reacton.component
def Wrapper(children):
    with w.HBox() as wrapper:
        w.HTML(value="A")
        wrapper.add_children(children)
        w.HTML(value="C")
    return wrapper


@reacton.component
def Example():
    with Wrapper() as wrapper:
        w.HTML(value="B")
    return wrapper

# This example prints "B A C" while I expected "A B C"

Is there a way to insert children to some place inside context manager?

UPD: I've got an expected result by manually adding each child to the latest container_adder:

def Children(children):
    rc = get_render_context()
    if rc.container_adders:
        for child in children:
            rc.container_adders[-1].add(child)


@reacton.component
def Wrapper(children):
    with w.HBox() as wrapper:
        w.HTML(value="A")
        Children(children)
        w.HTML(value="C")
    return wrapper

Is there a more convenient way to do this?

[maartenbreddels]

Hi Egor,

nice to see you dove into the code :)

using display also works in reacton and solara:

import reacton
import reacton.ipywidgets as w


@reacton.component
def Wrapper(children):
    with w.HBox() as wrapper:
        w.HTML(value="A")
        display(*children)
        w.HTML(value="C")
    return wrapper


@reacton.component
def Example():
    with Wrapper() as wrapper:
        w.HTML(value="B")
        w.HTML(value="B+")
    return wrapper

Is this what you needed?

[egormkn]

Yes, thank you. I think that should be added to the docs. Also, display imported from reacton duplicates children (is it a bug?) so it should be imported from IPython.display (or from solara where it is just an alias for IPython.display)