What is the meaning of the 'children' property, and where to get the property list?

Dash Python
1

I try to learn the code in this page. I am a freshman to this. I don’t know why use ‘children’ here instead of ‘value’ which I think is more easy to understand. Sorry if my question is na?ve I already check the source code of ‘dash.py’ but can’t get the list of the property.

I find a

code link

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='my-id', value='initial value', type='text'),
    html.Div(id='my-div')
])

@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)


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

And one more offtopic question how should I get noticed(I mean by email) when this thread be replied.

2

@woshichuanqilz - I’d search through children inside the docs, the first two chapters are really important (Part 1. Layout | Dash for Python Documentation | Plotly, Part 2. Basic Callbacks | Dash for Python Documentation | Plotly). Some excerpts about children from those pages:

  1. The dash_html_components library has a component for every HTML tag. The html.H1(children=‘Hello Dash’) component generates a <h1>Hello Dash</h1> HTML element in your application.

5.The children property is special. By convention, it’s always the first attribute which means that you can omit it: html.H1(children=‘Hello Dash’) is the same as html.H1(‘Hello Dash’). Also, it can contain a string, a number, a single component, or a list of components.

  1. The children of the HTML tag is specified through the children keyword argument. By convention, this is always the first argument and so it is often omitted.

And from the second chapter (Part 2. Basic Callbacks | Dash for Python Documentation | Plotly)

In Dash, the inputs and outputs of our application are simply the properties of a particular component. In this example, our input is the “value” property of the component that has the ID “my-id”. Our output is the “children” property of the component with the ID “my-div”.

Remember how every component was described entirely through its set of keyword arguments? Those properties are important now. With Dash interactivity, we can dynamically update any of those properties through a callback function. Frequently we’ll update the children of a component to display new text or the figure of a dcc.Graph component to display new data, but we could also update the style of a component or even the available options of a dcc.Dropdown component!

There are settings for this form, that you should be able to visit here: https://community.plotly.com/u/woshichuanqilz/preferences/emails

2 Likes
3

Really thank you sir. I will do the search more carefully next time
And thanks again.