How can I dynamically change html.Button text in dash? - html

Question

I have tried different attributes ( title, data, value, etc ) but they dont do the trick. Below is the sample code taken directly from the dash documentation. I simply would like to be able to push the button and have the button text change to something else besides "Submit", preferably the input text.
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
html.Div(dcc.Input(id='input-on-submit', type='text')),
html.Button('Submit', id='submit-val', n_clicks=0),
html.Div(id='container-button-basic',
children='Enter a value and press submit')
])
#app.callback(
Output('container-button-basic', 'children'),
Input('submit-val', 'n_clicks'),
dash.dependencies.State('input-on-submit', 'value')
)
def update_output(n_clicks, value):
return ('The input value was "{}" and the button has been clicked {} times'.format(
value,
n_clicks
))
if __name__ == '__main__':
app.run_server(debug=True)

Answer 1

Well, I found that I needed to update the "children" property. Below is code that performs the function I was looking for:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
html.Div(dcc.Input(id='input-on-submit', type='text')),
html.Button('Submit', id='submit-val', n_clicks=0),
html.Div(id='container-button-basic',
children='Enter a value and press submit')
])
#app.callback(
Output('container-button-basic', 'children'),
Output ('submit-val','children'),
Input('submit-val', 'n_clicks'),
dash.dependencies.State('input-on-submit', 'value')
)
def update_output(n_clicks, value):
if n_clicks==0:
return
else:
buttonText = value
return ('The input value was "{}" and the button has been clicked {} times'.format(
value,
n_clicks
), buttonText)
if __name__ == '__main__':
app.run_server(debug=True)