How to do this task with a tree?

Question

JavaScript

I have an array of objects

let tree = [{id:1,parent_id:0,name:"Росссия"},{id:2,parent_id:0,name:"Украина"},{id:3,parent_id:1,name:"Москва"},{id:4,parent_id:3,name:"Улица пушкина"}]

I roughly know how to select checkboxes, each element will have its own state and we can simply change the checked unchecked state.
But how to make parent checkboxes dependent on child ones?
As in the screenshot below.
As I understand it, we should no longer work with the state of a specific node, but output the entire json tree structure to the root component?
Can you roughly describe the algorithm of what to do when I click on the bottommost element, then it should be highlighted, but all parent ones should also change their status.

Answer 1

I'm not against writing my own bicycles, it's useful for understanding how certain solutions work, but I still recommend ant.design and its tree component, which is great for implementing such tasks.