Reputation: 21
have a problem with the implamantation search in the multiple tree view.
Can check the code in the link.
In the group we have childGroup
and list
, we have to search lists and groups names. (check data in the data.js file)
Think the problem is somewhere here.
const search = (items, term) => {
return items.reduce((acc, item) => {
if (contains(item.name, term)) {
acc.push(item);
} else if (item.childGroupList?.length) {
let newGroupsItems = search(item.childGroupList, term);
if (newGroupsItems?.length) {
item.childGroupList = newGroupsItems;
acc.push(item);
}
} else if (item.list?.length) {
let newListItems = search(item.list, term);
if (newListItems?.length) {
item.list = newListItems;
acc.push(item);
}
}
return acc;
}, []);
};
Upvotes: 2
Views: 60
Reputation: 13265
There were a few issues in your recursive search
.
Your if
, else if
, else if
chain should be independent. They should really be three if
blocks.
You need to push the result only after when all the searches are done at a certain level. I got a copy of the item and make childGroupList
and list
properties empty([]
) initially and update them when a search is successful.
Try like this.
// main search function, here is the problem
const search = (items, term) => {
return items.reduce((acc, item) => {
let itemCopy = JSON.parse(JSON.stringify(item));
itemCopy.childGroupList = [];
itemCopy.list = [];
let found = false;
if (contains(item.name, term)) {
found = true;
}
if (item.childGroupList?.length) {
let newGroupsItems = search(item.childGroupList, term);
if (newGroupsItems?.length) {
found = true;
itemCopy.childGroupList = newGroupsItems;
}
}
if (item.list?.length) {
let newListItems = search(item.list, term);
if (newListItems?.length) {
found = true;
itemCopy.list = newListItems;
}
}
if (found) {
acc.push(itemCopy);
}
return acc;
}, []);
};
Code sandbox => https://stackblitz.com/edit/react-rmrlj1?file=src%2FApp.js
Upvotes: 1