Adding Component via Clientside Callbacks

Dash Python
,
5

To use pattern-matching callbacks, the component needs to be added with the id in a stringified fashion. Dash uses a function called stringifyId, which hopefully they will expose sometime soon.

Anyways, this function looks like this:

function stringifyId(id) {
    if (typeof id !== 'object') {
        return id;
    }
    const stringifyVal = (v) => (v && v.wild) || JSON.stringify(v);
    const parts = Object.keys(id)
        .sort()
        .map((k) => JSON.stringify(k) + ':' + stringifyVal(id[k]));
    return '{' + parts.join(',') + '}';
}

To use a button, I’d also pass n_clicks first:

function(data, onChange) {
            var i = {type:"btn", index: crypto.randomUUID()};
            var comp = React.createElement(window.dash_html_components.Button, {
                id: stringifyId(i),
                n_clicks: 0,
                setProps: (props) => {
                    return props
                }
            }, children="hello");
            console.log(comp);
            return comp
        }

Also, if dash is not the one rendering the component, via a callback, then it is not going to be monitored by dash.

Or maybe try without stringifying the id.