Passing new updated data but rendering with initial data sent to the tree

[Arjav97]

What i am doing is in the onChange function i am setting the selected nodes in the state using useState and then rendering the selected nodes on right of the tree where each selected label is displayed with cross symbol and onClick of that cross button the node is deleted from the list and also updating the data by setting checked to false of that particular node and then when I am passing that deep cloned updated data to child component then all the checkboxes are unchecked as it is set with initial data.

I dont know the reason why it is happening since I am rendering child with HOC wherein I am using shouldComponent and willReceiveProps to identify the updated data that is sent as props is different from the previous data.

Need of any suggestions as if this setting up with new updated data cannot be done then I would have to find any other route of doing this dropdown tree

[mrchief]

Your issue sounds similar to #313 (comment)

Can you create a codesandbox that reproduces your issue?

[Arjav97]

I have reproduced the issue in codebox and the link is

https://codesandbox.io/s/rough-worker-t3i5b?file=/src/App.js

See how the action on list of nodes on pressing cross symbol deletes or refreshes the react dropdown tree with initial data since still parent rerender HOC is used and component lifecycle methods are used and also the data sent is deep copy so no mutating data directly sending everytime new object of data

[Arjav97]

Hi Hrusikesh I have attached the codesandbox link if you can look through let me know if there is any way around to solver it.

…

On Tue, Sep 28, 2021 at 5:43 PM Hrusikesh Panda ***@***.***> wrote: Your issue sounds similar to #313 (comment) <#313 (comment)> Can you create a codesandbox that reproduces your issue? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#519 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHBK2IU5DKP7OR6VJTIRDLLUEJAIFANCNFSM5EM6VGXA> .

[mrchief]

I'm getting this error when deleting

[Arjav97]

I have attached the updated link since I attached the wrong one...

The problem in this is that selecting on tree works well and deletion from the right portion of list also works but when I am doing unchecking directly on the tree I start facing uncertain results if you can go through this would be great.

https://codesandbox.io/s/rough-worker-t3i5b?file=/src/App.js

[Arjav97]

I guess this is the correct link !!!
https://codesandbox.io/s/rough-worker-t3i5b?file=/src/App.js

The problem is when I am selecting and deselecting from the list on the right side with cross symbol then updated state is reflected on tree but when I am unchecking on tree itself it shows change in selected nodes but it is not updated/reflected on the tree itself!!!

[mrchief]

I made a few tweaks and you can see the approach here https://codesandbox.io/s/focused-field-4qt17?file=/src/App.js

You'll need to handle selection/deselection of parent nodes but this is to show you the overall idea.