State management within OnChange

[jamescanady]

Greetings,
I've created a very basic example of the ReactTreeDropDown component being wrapped in a HOC that attempt to handle an internal state of the selectedNodes,
I have attempted to use the OnChange handler to capture the selected nodes, but when I attempt to modify the state, the ReactTreeDropDown component fails to render properly.
It appears that the setState call is superseding the internal state management and forcing the component to re-render before it can actually set its internal state/render

here's an example

https://codesandbox.io/s/react-dropdown-tree-select-forked-6n9e8

Selecting a top level item appears to work, but expanding the tree and selecting any sub item fails to correctly select the item.

Is there a recommended way to capture the selected nodes?

[mrchief]

This is the classic React rendering mistake which hooks, by virtue their simplicity makes all too more obfuscated to spot. Anytime you do a setState, react will re-render the components. This was way more obvious with class based components. So what's happening is that the component is doing it's internal thing and then passing on the selectedNodes info to you. You're setting that within the app state which forces a re-render of your app and thus, all the children which in this case, includes the dropdown.

You can use prevent-re-render-on-parent-render-hoc approach (there's a hook based example somewhere in old issues) or refactor your app where you do not setState within render. If you're using redux/mobx/useReducer then you'd update those and structure your app in a way where the tree is not in the render path when that state changes.

[aishwarya2392]

@mrchief I read in a discussion where the dropdown tree select component will itself manages its state, so the onChange need not be explicitly called? if i dont call the onchange, selecting/unselecting works perfectly fine

if so i need to update the selected/unselected node to the parent component, if i do that in onChange method, it throws error during removing the selected value "Cannot read property checked of undefined"

[aishwarya2392]

basically im modifying the data for the tree dropdown based on the selected nodes, im removing the selected nodes and sending the remaining data and showing the selected nodes during edit

[mrchief]

I see you created an issue. I'm going to close that so we can keep the discussions in one place.

basically im modifying the data for the tree dropdown based on the selected nodes, im removing the selected nodes and sending the remaining data and showing the selected nodes during edit

I'm trying to get clarity on this. The tree handles its own selection state so why are you doing all this?

[aishwarya2392]

I want to save the selected ones in state and display them during edit, is that possible without saving it in parent state?

[aishwarya2392]

I also have multiple tree dropdowns in a single page, and based on first dropdown the subsequent dropdown values has to change and based on the selected options from al the dropdowns, I will have to populate another react-select values

[mrchief]

It's a fairly complicated setup. You'd need to manage all of this in a parent state. You'd also need something like https://dowjones.github.io/react-dropdown-tree-select/#/story/prevent-re-render-on-parent-render-hoc to ensure the dropdowns don't get re-rendered as you're updating parent state.

basically im modifying the data for the tree dropdown based on the selected nodes, im removing the selected nodes and sending the remaining data and showing the selected nodes during edit

This makes more sense now. Instead of modifying the data object, I think you should hide the selected values via CSS which would accomplish similar functionality but without messing up the dropdown's internal state.