React DOM with nested tree like object

1

Hi,
I am trying to make something like this. I already made this but it’s not efficient.
image

I am thinking of using nested Tree-like Object to display the UI, I can iterate through it by using a recursive call of the same component.
but I cannot wrap my head around with how I would update specific items from the object.

[{
    "title": "Food",
    "path": "/root",
    "children": [{
        "title": "Veg",
        "path": "/root/Food",
        "children": [{
            "title": "Carrot",
            "path": "/root/Food/Veg",
            "children": [{
                "title": "Ooty carrot",
                "path": "/root/Food/Veg/Brinjal",
                "children": []
            }]
        }]
    }]
}, {
    "title": "Cloths",
    "path": "/root",
    "children": [{
        "title": "T shirt",
        "path": "/root/Cloths",
        "children": []
    }, {
        "title": "Shirt",
        "path": "/root/Cloths",
        "children": []
    }]
}]
3

Here is how you can think about it:

// data
const user = {
  name: "Nano",
  address: { street: "123 Main ST", city: "Test" }
}

// Access
console.log(user.address.street)

// Modify
user.address.street = "New Street Address"

The code/answer above is just for guidance so you can start wrapping your head around.

4

Look at how they attempt to show the data. It is for a framework, but ignore the UI and look at source code for index.jsx.

https://ej2.syncfusion.com/react/documentation/listview/nested-list/

5

I understand how to access and modify. but I am talking about, when the list is visible in the DOM, and now I want to modify specific property. how can i get this user.address.street ?