How to use the bobril.withKey function in bobril

m.TextField({
                value: str2,
                labelText: "Last Name",
                errorText: str2() == "" ? "This field is required" : null
            }),
            "tf2"
        ),
        b.withKey(
            m.TextField({
                value: str5,
                labelText: "Password",
                inputType: "password"
            }),
            "tf3"
        ),
        b.withKey(
            m.TextField({ value: str3, hintText: "Hint text and no label" }),
            "tf4"
        ),
        b.withKey(
            m.TextField({
                value: str3,
                labelText: "Disabled with label",
                disabled: true
            }),
            "tf5"
        ),
        b.withKey(
            m.TextField({
                value: str4,
                rows: 2,
                rowsMax: 4,

}
                }
                b.invalidate(ctx);
            }
        } else {
            if (focusFromKeyboard) showFocus = true;
        }
        if (showFocus) {
            rr = 12;
            ro = 0.2;
        }
        b.style(me, disabled ? disabledStyle : enabledStyle);
        let checkDiv: b.IBobrilNode = d.children != null ? { tag: "div" } : me;
        b.style(checkDiv, rootSwitchStyle);
        checkDiv.children = [
            rr != 0 && b.withKey(b.styledDiv("", showFocus ? focusFromKeyStyle : rippleStyle, { left: 12 - rr, top: 12 - rr, width: 2 * rr, height: 2 * rr, opacity: ro, background: checked ? styles.primary1Color : styles.checkboxOffColor }), "r"),
            b.styledDiv(ics.off, disabled ? ((checked || indeterminate) ? hiddenStyle : checkDisabled) : (checked ? boxWhenSwitchedStyle : boxStyle)),
            indeterminate != null && b.withKey(b.styledDiv(ics.indeterminate!, disabled ? (indeterminate ? checkDisabled : hiddenStyle) : (indeterminate ? checkWhenSwitchedStyle : checkStyle)), "i"),
            b.styledDiv(ics.on, disabled ? (checked ? checkDisabled : hiddenStyle) : (checked ? checkWhenSwitchedStyle : checkStyle))
        ];
        if (checkDiv !== me) {
            me.children = [checkDiv, b.styledDiv(d.children, textStyle, disabled && disabledTextStyle)];
            b.style(me, wrapStyle);
        }
        me.attrs = {
            role: ctx.radio ? "radio" : "checkbox",
            "aria-checked": indeterminate ? "mixed" : checked ? "true" : "false",
            "aria-disabled": disabled ? "true" : "false"
        };
        if (!(disabled || ctx.radio && d.tabindex == null))
            me.attrs.tabindex = d.tabindex || 0;
    },

function getTextFieldPreview(): b.IBobrilChildren {
    return m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
        b.withKey(m.TextField({ value: str1, labelText: "First Name" }), "tf1"),
        b.withKey(
            m.TextField({
                value: str2,
                labelText: "Last Name",
                errorText: str2() == "" ? "This field is required" : null
            }),
            "tf2"
        ),
        b.withKey(
            m.TextField({
                value: str5,
                labelText: "Password",
                inputType: "password"
            }),
            "tf3"
        ),
        b.withKey(

function getTextFieldPreview(): b.IBobrilChildren {
    return m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
        b.withKey(m.TextField({ value: str1, labelText: "First Name" }), "tf1"),
        b.withKey(
            m.TextField({
                value: str2,
                labelText: "Last Name",
                errorText: str2() == "" ? "This field is required" : null
            }),
            "tf2"
        ),
        b.withKey(
            m.TextField({
                value: str5,
                labelText: "Password",
                inputType: "password"
            }),
            "tf3"
        ),

function getCheckboxPreview(): b.IBobrilChildren {
    return m.Paper({ style: { margin: 16, padding: 8 } }, [
        b.withKey(
            m.Checkbox(
                {
                    checked: ch1,
                    action: () => {
                        ch1 = !ch1;
                        b.invalidate();
                    }
                },
                "Two state Checkbox"
            ),
            "ch1"
        ),
        b.withKey(
            m.Checkbox({ checked: ch1, disabled: true }, "Disabled two state"),
            "ch2"
        ),

function getRadioButtonPreview(): b.IBobrilChildren {
    return m.Paper({ style: { margin: 16, padding: 8 } }, [
        m.RadioButtonGroup({ value: rb1, unselectedValue: -1 }, [
            b.withKey(m.RadioButton({ value: 0 }, "Option A"), "rb1"),
            b.withKey(m.RadioButton({ value: 1 }, "Option B"), "rb2"),
            b.withKey(m.RadioButton({ value: 2 }, "Option C"), "rb3"),
            b.withKey(
                m.RadioButton({ value: 3, disabled: true }, "Disabled Option"),
                "rb4"
            )
        ])
    ]);
}

leftIconElement = b.styledDiv(leftIconElement,
                leftIconDesktopStyle, { marginTop: d.desktop ? -8 : -4 });

        let rightIconElement: b.IBobrilNode | undefined;
        if (d.menuItems && !d.rightIcon)
            d.rightIcon = icons.menuRight();
        if (d.rightIcon)
            rightIconElement = b.styledDiv(d.rightIcon, { color: d.disabled ? styles.strDisabledColor : styles.strTextColor },
                rightIconDesktopStyle, { marginTop: d.desktop ? -8 : -4 });

        let secondaryTextElement;
        if (d.secondaryText) secondaryTextElement = b.styledDiv(d.secondaryText, secondaryTextStyle);

        let childMenuPopover;
        if (d.menuItems && ctx.open) {
            childMenuPopover = [b.withKey(ClickAwayListener({
                onClick: () => handleRequestClose(ctx)
            }), "c"),
            Popover({
                autoCloseWhenOffScreen: true,
                animation: d.animation,
                anchorOrigin: d.anchorOrigin || { horizontal: 'right', vertical: 'top' },
                anchorNode: ctx.me,
                open: ctx.open,
                targetOrigin: d.targetOrigin || { horizontal: 'left', vertical: 'top' },
                onRequestClose: () => handleRequestClose(ctx)
            },
                Menu({
                    desktop: d.desktop,
                    initiallyKeyboardFocused: ctx.focused,
                    onClose: () => {
                        handleRequestClose(ctx);

}),
            "tf2"
        ),
        b.withKey(
            m.TextField({
                value: str5,
                labelText: "Password",
                inputType: "password"
            }),
            "tf3"
        ),
        b.withKey(
            m.TextField({ value: str3, hintText: "Hint text and no label" }),
            "tf4"
        ),
        b.withKey(
            m.TextField({
                value: str3,
                labelText: "Disabled with label",
                disabled: true
            }),
            "tf5"
        ),
        b.withKey(
            m.TextField({
                value: str4,
                rows: 2,
                rowsMax: 4,
                hintText: "Multiline 2-4 rows, Hint text and no label"
            }),
            "tf6"
        ),

function getSliderPreview(): b.IBobrilChildren {
    return m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
        b.withKey(m.Slider({ value: slider1 }), "s1"),
        b.withKey(m.Slider({ value: slider1, disabled: true }), "s2"),
        b.withKey(m.Slider({ value: slider2, min: 5, max: 15, step: 1 }), "s3"),
        b.withKey(
            m.Slider({
                value: slider2,
                min: 5,
                max: 15,
                step: 1,
                disabled: true
            }),
            "s4"
        )
    ]);
}

function getSliderPreview(): b.IBobrilChildren {
    return m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
        b.withKey(m.Slider({ value: slider1 }), "s1"),
        b.withKey(m.Slider({ value: slider1, disabled: true }), "s2"),
        b.withKey(m.Slider({ value: slider2, min: 5, max: 15, step: 1 }), "s3"),
        b.withKey(
            m.Slider({
                value: slider2,
                min: 5,
                max: 15,
                step: 1,
                disabled: true
            }),
            "s4"
        )
    ]);
}