Change list element dynamically on onClick Button Event

Dash Python
1

Hi,
I am new to Plotly Dash & I have been experimenting the last couple of days, but I don’t get any further with one challenge I have. I do not understand the callbacks really well. I did the examples from the documentation, but that did not help me either.

I have the following code:

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Output, Input

list_1 = ['2 Red', '2 Blue', '3 Green']
list_2 = ['10 Red', '8 Blue', '4 Green']

rgb = {c: int(n) for n, c in [p.split(' ') for p in list_2]}
for n, c in [p.split(' ') for p in list_1]:
    if c in rgb:
        rgb[c] -= int(n)
    else:
        rgb[c] = -int(n)
print([f'{rgb[p]} {p}' for p in rgb])


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, external_stylesheets, dbc.themes.GRID])


def dict_to_list():
    dict_list = []
    for k, v in rgb.items():
        dict_list.append(f"{v} {k}")
    return dict_list


rgb = dict_to_list()

button = dbc.Button("Subtract", outline=True, color="success", className="mr-1")


def show_list():
    return dbc.ListGroup([dbc.ListGroupItem(x) for x in list_2], style={'marginTop': '10px', 'marginLeft': '10px'})


def show_cards():

    cards = html.Div([
                dbc.Card([
                    dbc.CardBody([b], style={'textAlign': 'center'}),
                    dbc.CardFooter([button], style={'textAlign': 'center'})
                ], style={'marginTop': '10px', 'marginRight': '10px', 'whiteSpace': 'pre-line'}) for b in list_1
            ])

    return cards


app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            html.Content(children=show_list())], width=3),

        dbc.Col([
            dbc.Container([dbc.CardColumns(children=show_cards())], style={'marginRight': '15px'})
        ])
    ])
])


if __name__ == '__main__':
    app.run_server(debug=True)

The first part of the script just subtracts all the string elements from list_1 from list_2. The dashboards displays list_2 as a ListGroup & all list_1 elements as cards. My goal is to subtract the list_1 values from the corresponding list element in list_2 in Dash.

I know, that I need at least two callbacks, one for the list & one for the cards. If I push the ‘Subtract’ button, the subtraction should take place. And I do know, that I need to implement the rgb-functionality as well, but I do not have any idea how to start / break down the problem into easier parts.

I’d appreciate some code examples and tips as well as references to good tutorials or documentations.

Thank you so much!