How to Traverse selectedNodes in 'onChange' handler to Reach Child Values

[andrewhazel]

Hey all,

I stumbled across this component to incorporate into a project I am currently working on - the tree-like structure ultimately makes the most sense for the respective design in the project.

I am attempting to pass data containing regions (i.e. Asia, Africa, etc) and then have children within those regions (i.e. Southern Asia, Western Asia, etc.) and finally countries that belong to those regions. I have noticed that 'selectedNodes' only displays the values for whichever depth nodes you are on. This should not be a problem, however when I go to access the children of those nodes I get 'undefined'.

I noticed that there is a reference to the children (i.e. the pointer to the children nodes), so I'm unsure if there is something I am missing to be able to reference the child node and its respective value (potentially my linked-lists knowledge has failed me).

Ultimately, it would be great to select a region like 'Asia' and end up with the values for the grandchildren.

[mrchief]

@andrewhazel thanks for starting a discussion and not an issue! Also, thanks for the great description. The children prop is intentionally blanked out after init to avoid confusion. The tree creates an _children prop to match its internal mechanisms and it'd be not so performant to keep updating 2 property bags - especially since tree data tends to be big and traversing them to update selection state is expensive.

Since most react apps have some kind of app/page state store like context or redux or mobx, the component allows for you to keep track of grandchildren/children/parent selection via onChange handler. There's a composition based example which demos this concept along with adding a few tweaks to easily locate deeply nested data. This comment elaborates the idea a bit more.