[solved] dcc.Input value is not read because of callback

Dash Python
1

Hi,
I am trying to make a simple UI which like this.

image
image.png1777×194 9.57 KB

I have set the text box value to be “something” and I have also added a callback which actually read it current value and output it with addition to what a user select in the dropdown.
The output in textbox on the start of application is “None:”. When I remove the callback things work normal.
Here is my code.

 html.Div(
                [
                    html.Div([
                        dcc.Dropdown(options=[{"label": key, "value": key} for key in qddts_fields
                                              ], placeholder="Select QDDTS Field", id="qddts")
                    ], className="col-lg-3"),
                    html.Div([
                        dcc.Input(
                            placeholder='Enter a value...',
                            type='text',
                            value='',
                            className="form-group form-control",
                            id= "value"
                        )
                    ], className="col-lg-3"),
                    html.Div([
                        dcc.Dropdown(
                            options = [
                                {"label": "OR", "value":"or"},
                                {"label": "AND", "value":"and"},
                                {"label": "MINUS", "value":"minus"},
                                {"label": "(", "value":"("},
                                {"label": ")", "value":")"},
                            ],
                            placeholder="Choose a connective",
                            id= "connector"
                        )
                    ], className="col-lg-3"),
                    html.Div([
                        html.Button("Add", className= "btn btn-success", id = "Add"),
                    ], className="two columns")
                ], className="row",
                style={
                    "margin-top": "2%"
                }
            ),

            html.Div([
                        dcc.Input(
                            placeholder='Query Generated is...',
                            type='text',
                            value='Product',
                            className="form-group form-control",
                            id="query"
                        ),
                        html.Div([
                        html.Button("Query", className= "btn btn-success", id = "query_button"),
                    ]),
                        html.Div([
                            dcc.Input(
                                placeholder="Data frame will arrive",
                                type = "text",
                                value = "",
                                className = "form-group form-control",
                                id = "df"
                            )
                        ])
                    ]
            )
        ], className= "container"
    )

@app.callback(
    Output(component_id="query", component_property="value"),
    [Input(component_id="Add", component_property="n_clicks")],
    state=[State("qddts", "value"),
           State("value", "value"),
           State("connector", "value"),
           State("query", "value")])
def update_query(n_clicks, qddts, value, connector, query):
    if connector:
        return "{} {} {}:{}".format(query, connector, qddts, value)
    else:
        return "{}:{}".format(qddts, value)

Sorry I just messed up my environment and Now it’s working