TLDR:
How should I define id attributes for elements created directly in React so they are captured by Dash pattern-matching?
Long description:
I’m working on an extension that wraps a React component (Parent) that is responsible to create other components (Children). To be clear: I don’t create Children directly, but indirectly by modifying a prop of Parent.
Parent does not define the id attribute for Children, but I can define the id for customized Children that I import from a separate script. In this script I am trying to create an id following the pattern-matching way, so it could be accessible by Dash callbacks.
It is failing though, this is what Dash shows me at the moment of creation of the component:
A nonexistent object was used in an `Output` of a Dash callback.
The id of this object is {"index":{"wild":"MATCH"},"type":"node-element-model"}
with MATCH values [1] and the property is `children`.
The wildcard ids currently available are logged above.
But the component with this id is created, as shown by elements inspection in the browser:
also in the browsers’ console I can get the right element by id using:
document.getElementById(JSON.stringify({"index":1,"type":"node-element-model"}, Object.keys({"index":1,"type":"node-element-model"}).sort()))
so why is pattern-matching failing here? And what can I try to make it work? Any ideas?
1 post - 1 participant
