Invalid prop for this component

I am having some errors in dashboard as mentioned in title but not in terminal and I am not able to figure it out the issue.
Here are the list of errors:

  1. Property "num_clicks" was used with component ID: "button" in one of the Input items of a callback. This ID is assigned to a dash_html_components.Button component in the layout, which does not support this property. This ID was used in the callback(s) for Output(s): output-state.children
  2. Property "label_value" was used with component ID: "slider-2" in one of the State items of a callback. This ID is assigned to a dash_core_components.Slider component in the layout, which does not support this property. This ID was used in the callback(s) for Output(s): output-state.children
  3. Property "preprocess_func" was used with component ID: "drop-down" in one of the State items of a callback. This ID is assigned to a dash_core_components.Dropdown component in the layout, which does not support this property. This ID was used in the callback(s) for Output(s): output-state.children
  4. Property "threshold_value" was used with component ID: "slider" in one of the State items of a callback. This ID is assigned to a dash_core_components.Slider component in the layout, which does not support this property. This ID was used in the callback(s) for Output(s): output-state.children
  5. Property "text" was used with component ID: "input_text" in one of the State items of a callback. This ID is assigned to a dash_core_components.Textarea component in the layout, which does not support this property. This ID was used in the callback(s) for Output(s): output-state.children
app = dash.Dash(
    __name__, title="Multi Tag Prediction", external_stylesheets=[dbc.themes.BOOTSTRAP]
)
server = app.server
app.layout = html.Div(
    [
        html.H2(
            ["Multi Tag Prediction"],
            style={
                "text-align": "left",
                "margin-left": "2%",
                "margin-right": "2%",
                "margin-bottom": "1%",
            },
        ),
        html.Hr(),
        dbc.Row(
            [
                dbc.Col(
                    html.Div(
                        [
                            html.H6("Filter by Preprocessing Functions to Apply:"),
                            dcc.RadioItems(
                                id="radio-button",
                                options=[
                                    {"label": "All", "value": "all"},
                                    {"label": "Customized", "value": "custom"},
                                ],
                                value="all",
                                labelStyle={"display": "inline-block"},
                                inputStyle={"margin-right": "2px"},
                                style={"padding": "5px"},
                            ),
                            dcc.Dropdown(
                                id="drop-down",
                                options=[
                                    {
                                        "label": "remove_digits",
                                        "value": "remove_digits",
                                    },
                                    {
                                        "label": "remove_stopwords",
                                        "value": "stop_words",
                                    },
                                    {
                                        "label": "text_lemmatization",
                                        "value": "text_lemmatization",
                                    },
                                ],
                                value=[
                                    "remove_digits",
                                    "remove_stopwords",
                                    "text_lemmatization",
                                ],
                                multi=True,
                                placeholder="Select the preprocessing functions to apply",
                                searchable=True,
                                style={"padding": "15px", "margin-bottom": "10px"},
                            ),
                            html.Div(
                                [
                                    html.H6(
                                        "Filter by threshold (probabilty of labels to include):"
                                    ),
                                    dcc.Slider(
                                        id="slider",
                                        min=0.1,
                                        max=0.9,
                                        step=0.1,
                                        value=0.5,
                                        marks={
                                            0.1: "0.1",
                                            0.2: "0.2",
                                            0.3: "0.3",
                                            0.4: "0.4",
                                            0.5: "0.5",
                                            0.6: "0.6",
                                            0.7: "0.7",
                                            0.8: "0.8",
                                            0.9: "0.9",
                                        },
                                        tooltip={"placement": "top"},
                                        included=False,
                                    ),
                                ],
                                style={"margin-bottom": "10px"},
                            ),
                            html.Div(
                                [
                                    html.H6(
                                        "Filter by label count (how many labels to include if there are more):"
                                    ),
                                    dcc.Slider(
                                        id="slider-2",
                                        min=5,
                                        max=10,
                                        step=1,
                                        value=5,
                                        marks={
                                            5: "5",
                                            6: "6",
                                            7: "7",
                                            8: "8",
                                            9: "9",
                                            10: "10",
                                        },
                                        tooltip={"placement": "top"},
                                        included=False,
                                    ),
                                ],
                                style={"margin-top": "10px"},
                            ),
                        ],
                        style={
                            "width": "100%",
                            "box-shadow": "5px 5px 5px  #cacfd2",
                            "padding": "30px",
                            "background-color": "#f9f9f9",
                        },
                    ),
                    width={"size": 4, "order": "first", "offset": 0},
                ),
                dbc.Col(
                    html.Div(
                        [
                            dcc.Textarea(
                                id="input_text",
                                value="Type the text or copy-paste from somewhere else",
                                style={
                                    "height": 300,
                                    "width": "100%",
                                    "box-shadow": "5px 5px 5px  #cacfd2",
                                    "margin-left": "-20px",
                                    "background-color": "#f9f9f9",
                                },
                            ),
                            dcc.Loading(
                                id="spinner",
                                children=[
                                    html.Button(
                                        "Submit",
                                        id="button",
                                        n_clicks=0,
                                        style={
                                            "margin-left": "532px",
                                            "margin-top": "15px",
                                        },
                                    )
                                ],
                                type="graph",
                            ),
                            html.Div(id="output-state"),
                        ],
                    ),
                    width={"size": 6, "order": "second"},
                    # align="end",
                ),
            ],
            justify="around",
        ),
    ],
    style={"background-color": "#f2f2f2"},
)


@app.callback(Output("drop-down", "value"), [Input("radio-button", "value")])
def display_status(selector):
    if selector == "all":
        return list("remove_digits", "remove_stopwords", "text_lemmatization")
    else:
        return []


@app.callback(
    Output("output-state", "children"),
    [Input("button", "num_clicks")],
    [
        State("input_text", "text"),
        State("slider", "threshold_value"),
        State("drop-down", "preprocess_func"),
        State("slider-2", "label_value"),
    ],
)
def label_prediction(num_clicks, text, threshold_value, preprocess_func, label_value):
    if text is None:
        raise PreventUpdate
    else:
        if num_clicks:
            params = ["remove_digits", "remove_stopwords", "text_lemmatization"]
            args = [item in preprocess_func for item in params]
            preprocess_text = preprocess(text, *args)
            transformed_text = tfidf.fit_transform([preprocess_text])
            prediction = classifier.predict_proba(transformed_text)
    return f"Predicted labels:{get_tags(prediction[0],threshold_value,label_value)}"


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

@adamschroeder @chriddyp help me here please…and sorry for tagging you guys personally.

Hi @matsujju ,
I’m in-between meetings today so limited time, but make sure you know the correct names of the html and core components’ parameters. In one of the callback decorators, you use button and num_ckicks in the input, but the button doesn’t have that parameter. It’s called n_clicks.
See here:
https://dash.plotly.com/dash-html-components/button

1 Like

Thanks for your time.