Handle multiple radio buttons in a tree view with React - reactjs

Question

I have a dataset with menu items and nested sub-menu items, coming from a GET request. With that, I render a table in a react-hook-form for assigning access permissions on each menu item.
[
{
moduleId: 2,
moduleName: "Menu 1",
permission: 0,
subModuleList: [
{
moduleId: 7,
moduleName: "Menu 1.1",
permission: 0,
subModuleList: null
},
{
moduleId: 8,
moduleName: "Menu 1.2",
permission: 0,
subModuleList: [
{
moduleId: 11,
moduleName: "Menu 1.2.1",
permission: 0,
subModuleList: null
},
{
moduleId: 33,
moduleName: "Menu 1.2.2",
permission: 0,
subModuleList: null
},
{
moduleId: 49,
moduleName: "Menu 1.2.3",
permission: 0,
subModuleList: null
},
{
moduleId: 68,
moduleName: "Menu 1.2.4",
permission: 0,
subModuleList: null
}
]
}
]
}
]
Each table row is a menu item and has 2 radio buttons (no access & read) if it has children, and 3 radio buttons (no access, read & read/write) if is without children.
What I am trying to accomplish, is that each time a radio button is clicked on a child menu item, I want all the parent menu items to update as well with a relevant checked radio button. I feel really stacked on how to achieve this with react.
Here is a code sandbox link with all the current implementations.
Example use case: When checking the menu item Menu 1.2.2 with read or read/write permissions, the Menu 1.2 and Menu 1 should also have checked the read permission
Thank you in advance for your time!

Answer 1

So after some thought, I came up with a solution. The first step is to identify all the parents of each child is clicked.
function getPath(object, search) {
if (object.moduleId === search) return [object.moduleName];
else if (object.subModuleList || Array.isArray(object)) {
let children = Array.isArray(object) ? object : object.subModuleList;
for (let child of children) {
let result = getPath(child, search);
if (result) {
if (object.moduleId) result.unshift(object.moduleName);
return result;
}
}
}
}
This function returns an array of names of all the parent elements. Then I had to find these parent elements on my dataset and update their values based on my needs. There is also a check if the parent element has children, and one or more are checked with value > 0, to retain the parent as checked.
//get all parent objects
const findId = (object, key, searchTerm, newValue) => {
if (object === null) return;
if (Array.isArray(object)) {
for (const obj of object) {
findId(obj, key, searchTerm, newValue);
}
} else {
if (object.hasOwnProperty(key) && object[key] === searchTerm) {
if (object.subModuleList !== null) {
if (newValue >= "1") newValue = "1";
if (newValue === "0") {
const childActive = object.subModuleList.some(
(element) => element.permission !== "0"
);
if (childActive) {
newValue = "1";
} else {
newValue = "0";
}
}
}
object.permission = newValue;
return object;
}
for (const k of Object.keys(object)) {
if (typeof object[k] === "object") {
findId(object[k], key, searchTerm, newValue);
}
}
}
};
Here you can find an updated code sandbox
I hope that someone will benefit from this solution. Also, I want to mention that the code presented here, is also from answers of other devs on other topics.