Problem managing component state

[zvrabec]

Hi guys!

I have two components:

@component
def CheckBox(label, label_position, value, variant, **kwargs):

    is_checked, toggle_is_checked, _ = use_toggle()
    #print(is_checked)
    return Container(
        html.label(label) if label_position == "left" else None,
        html.div(
            {
                "tab_index": kwargs.get("tab_index"),
                "class_name": "checkbox " + variant,
                "on_click": toggle_is_checked
            },
            html.div(
                {
                    "style": {
                        "display": "block" if is_checked else "none"
                    }
                }
            )
        ),
        html.label(label) if label_position == "right" else None,
        alignment = "center", direction = "row"

    )

and

@component
def DropDown(*args, label, align, variant, caret, **kwargs):
    is_shown, toggle_is_shown, set_is_shown = use_toggle()
    print(is_shown)
    selected_value, set_selected_value = use_state(label)
    # def get_selection(e):
    #     print(e)
    # children = [child for child in args]
    return Container(
        Button(selected_value, FAIcon("caret-down") if caret else "", variant = variant, on_mouse_down = toggle_is_shown, on_blur = set_is_shown(False)),
        html.div(
            {
                "class_name": "dropdown show" if is_shown else "dropdown"
            },
            args
        ),
        alignment = align or "start", direction = "column", width = "fit-content", position = "relative"
    )

In the first one (CheckBox) state works as expected, but in the second one (DropDown) state changes as desired, but chagnges to original right away. What am I doing wrong?

[Archmonger]

Can you please clarify your question, and provide a more simple example?

[zvrabec]

I had a problem with the state of the component, but later I realized my logic was wrong. Thanks for your intention to help.