# State callback is not reporting the real state

**URL:** <https://community.plotly.com/t/state-callback-is-not-reporting-the-real-state/12892>\
**Category:** Dash Python\
**Created:** [August 21, 2018, 11:51am UTC](https://community.plotly.com/t/state-callback-is-not-reporting-the-real-state/12892 "2018-08-21T11:51:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![cmartinis](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@cmartinis](https://community.plotly.com/u/cmartinis)\
**Post date:** [August 21, 2018, 11:51am UTC](https://community.plotly.com/t/state-callback-is-not-reporting-the-real-state/12892/1 "2018-08-21T11:51:05Z")

</div>

Hi,

I am modifying a the innerHTML of an element with js and jquery, (this works in the browser):

('\*[id\*=fpbutton]:visible').each(function() { if((this).attr(‘class’) === event.target.className){  
console.log((this).attr('class')); console.log(document.getElementById('fpbutton\_clicked')); var x = document.getElementById('fpbutton\_clicked'); x.innerHTML = (this).attr(‘class’);  
console.log(document.getElementById(‘fpbutton\_clicked’));  
console.log(’--------------------------------------------’);  
}

```
	});

```

then I am firing a callback with the state of the parent:  
the div:  
current\_fp\_distribution\_clicked = html.Div(id=‘fpbutton\_clicked’,children = ‘hola’)

the callback:  
#creating callbacks for patient space and DSI click (to show distribution of the DSI along patients)  
@app.callback(Output(‘distributions’, ‘children’), [Input(‘fpbutton’, ‘n\_clicks’)],  
[State(‘fpbutton\_clicked’,‘children’)])  
def on\_click(n\_clicks,state):  
#global distributions  
if n\_clicks is not None:  
print('state ',state)

I see the div changing in the browser but the state is always ‘hola’, the initial declaration.  
Why?  
Thanks!

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [August 21, 2018, 12:50pm UTC](https://community.plotly.com/t/state-callback-is-not-reporting-the-real-state/12892/2 "2018-08-21T12:50:39Z")

</div>

> [@cmartinis](#):
>
> I am modifying a the innerHTML of an element with js and jquery, (this works in the browser):

This way of updating HTML parameters isn’t supported. We keep the representation of the tree entirely in memory and will re-render it in React, so if you change the content with query selectors then those changes won’t get propagated into Dash’s front-end.

If you need to modify the front-end’s components, I recommend creating your own Dash components in React: [Build Your Own Components | Dash for Python Documentation | Plotly](https://dash.plot.ly/plugins)

---

<div class="post-metadata">

**Author:** ![cmartinis](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@cmartinis](https://community.plotly.com/u/cmartinis)\
**Post date:** [August 21, 2018, 1:08pm UTC](https://community.plotly.com/t/state-callback-is-not-reporting-the-real-state/12892/3 "2018-08-21T13:08:53Z")

</div>

I will do that, but at this moment I have no time. I have a lot of programmatically generated buttons, like 6000. I am strugling to find a way to detect whick input is triggered, something quite basic.

Generating all the independent possible (as you pointed out in other threads) callbacks is slowing down the app too much, not factible. I am trying to figure out how to do that, I am working on this tricky way, I am sure I will find a way to handle that, but what alternatives I have? I LOVE Dash,but that simple feature is a must…

What I am able to do:

get click ids by js  
modify an input field value and pass its state to a callaback  
the value is modified in the page but the callback is not triggered until I manually add an empty space (or anything else)

I will try to simulate the manual input event with js…

Could I create a dcc.Input version with react to do so? I don’t have time, I don’t know anything about react. Do you think it’s possible?

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [August 21, 2018, 2:31pm UTC](https://community.plotly.com/t/state-callback-is-not-reporting-the-real-state/12892/4 "2018-08-21T14:31:51Z")

</div>

> [@cmartinis](#):
>
> Could I create a dcc.Input version with react to do so?

Yeah, for now you could create your own `dcc.Input` that would add a `value_timestamp` property that would tell you when the value has changed. You could use that to determine _which_ input has changed. Here’s how we do that with the html components. [dash-html-components/src/components/Div.react.js at master · plotly/dash-html-components · GitHub](https://github.com/plotly/dash-html-components/blob/master/src/components/Div.react.js#L10-L12)

You could start by looking at the existing `dcc.Input` component: [dash-core-components/src/components/Input.react.js at master · plotly/dash-core-components · GitHub](https://github.com/plotly/dash-core-components/blob/master/src/components/Input.react.js#L30-L48) and then adding the `Date.now()` call in the `setProps` function.

> [@cmartinis](#):
>
> I don’t know anything about react

We’re working on a “React for Python Devs” guide here: [React for python devs by valentijnnieman · Pull Request #116 · plotly/dash-docs · GitHub](https://github.com/plotly/dash-docs/pull/116)

---

<div class="post-metadata">

**Author:** ![cmartinis](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@cmartinis](https://community.plotly.com/u/cmartinis)\
**Post date:** [August 21, 2018, 2:58pm UTC](https://community.plotly.com/t/state-callback-is-not-reporting-the-real-state/12892/5 "2018-08-21T14:58:13Z")

</div>

Thanks a lot, your help is very useful.

I am looking at the react code. I see that there is specified onChange.  
I tried to fire the callaback by calling a jQuery change over my input field.

$( ‘input’ ).change()

I understand that this should trigger the callback, but it’s not working. Do you know why?

Thanks again.
