What kind of object does State('myDiv','style') return ? Doesn't seem to be a dict; Dash fails returning a key/value pair

Dash Python
1

Hello,

Consider three Div.

-DivOne displays a result (doesnt matter what, it’s the result of a callback)
-DivTwo has a specifc style, let’s say {“background-color”: “#fff”, “color”: “#333”}
-DivThree is updated by another callback, when the result in DivOne is updated (by the first callback), and displays the style of DivTwo

The callback is initiated as below:

app.callback(Output('DivThree', 'children'),
              [Input('DivOne','children')],
              [State('DivTwo', 'style')]
              )
def checkUpdatedStyle(resultFromDivOne,styleOfDivTwo):
    #some instructions
    return updatedStyle

Questions:

  1. Why does

     app.callback(Output('DivThree', 'children'),
               [Input('DivOne','children')],
               [State('DivTwo', 'style')]
               )
 def checkUpdatedStyle(resultFromDivOne,styleOfDivTwo):

     return styleOfDivTwo

    gives this error message in the debugger:
    An object was provided as children instead of a component, string, or number (or list of those). Check the children property that looks something like:
    {
    “background-color”: “#fff”,
    “color”: “#333”
    }

2.Why does

app.callback(Output('DivThree', 'children'),
              [Input('DivOne','children')],
              [State('DivTwo', 'style')]
              )
def checkUpdatedStyle(resultFromDivOne,styleOfDivTwo):

    return styleOfDivTwo['background-color']

return both the result #fff and an error:

TypeError: ‘NoneType’ object is not subscriptable

I assume from this that “style” is not a dicitionnary ?

  1. Given that I aim to extract the background-color attribute, for a comparison, how can I proceeed ? Right now, I have no other choice but to convert both the style of the div and the default style to strings, and compare both strings, like this:

     app.callback(Output('DivThree', 'children'),
               [Input('DivOne','children')],
               [State('DivTwo', 'style')]
               )
 def checkUpdatedStyle(resultFromDivOne,styleOfDivTwo):
     result=str(styleOfDivTwo)+str({'background-color': '#fff', 'color': '#333'})
     if str(styleOfDivTwo)==str({'background-color': '#fff', 'color': '#333'}):
         return(result)
     else:
         return "Error", result

Is it a JSON object? I tried to access its properties with json.dumps(styleOfDivTwo[‘background-color’]) but it didnt work neither.

Would appreciate if someone could enlight me. Thanks :slight_smile:

2

For the callback associated with checkUpdatedStyle, the return value of styleOfDivTwo will work if your output parameter is changed to Output('DivThree', 'style') vice Output('DivThree', 'children').

Children parameters, when used for data storage, need to be JSON-convertable.

Style parameters are dict objects.