How to iterate over all children elements?
I have an array that has an infinite number of nested childrens, how do I output all of them?
JavaScript
x
8
1
const data = [
2
{ title: "Mark", children: [{ title: "Alex" }] },
3
{
4
title: "Alisa",
5
children: [{ title: "Bob", children: [{ title: "Jacob" }] }]
6
}
7
];
8
I only go through two levels, but there can be as many as you like.
JavaScript
1
9
1
{data.map((item) => {
2
return (
3
<div>
4
{item.title}
5
{item.children.map((item) => item.title)}
6
</div>
7
);
8
})}
9
Advertisement
Answer
Make the mapper a named function, and then you’ll be able to call it recursively.
JavaScript
1
8
1
const renderItem = item => (
2
<div>
3
{item.title}
4
{item.children?.map(renderItem)}
5
</div>
6
);
7
return data.map(renderItem);
8