How to iterate dynamic children's
Unanswered
Chinese Alligator posted this in #help-forum
Chinese AlligatorOP
Hi guys.
In my next@latest i wana build breadcrumbs
The general idea is to create breadcrumbs container and normalize nested breadcrumbs items.
So container should transform this
to this
i used the first function from the google to do that. it recursively iterates over children.props.children
but in nextjs i got the following object in the children array.
Second children doesnt contains props.children. Instead props.template present.
### i need guide how to iterate over this object
Here is reproduction repo - https://github.com/th3n3ro/next-childrens-iterator
In my next@latest i wana build breadcrumbs
The general idea is to create breadcrumbs container and normalize nested breadcrumbs items.
So container should transform this
<BreadcrumbsList>
<Fragment>
<BreadcrumbItem />
<Fragment>
<BreadcrumbItem />
<Fragment>
<BreadcrumbItem />
</Fragment>
</Fragment>
</Fragment>
</BreadcrumbsList>
to this
<BreadcrumbsList>
<BreadcrumbItem />
<BreadcrumbItem />
<BreadcrumbItem />
</BreadcrumbsList>
i used the first function from the google to do that. it recursively iterates over children.props.children
but in nextjs i got the following object in the children array.
Second children doesnt contains props.children. Instead props.template present.
### i need guide how to iterate over this object
Here is reproduction repo - https://github.com/th3n3ro/next-childrens-iterator
10 Replies
const flattenChildren = (children) => {
const flattened = [];
React.Children.forEach(children, (child) => {
if (!React.isValidElement(child)) {
return;
}
if (child.props && child.props.children) {
flattened.push(...flattenChildren(child.props.children));
} else if (child.props && child.props.template) {
flattened.push(...flattenChildren(child.props.template));
} else {
flattened.push(child);
}
});
return flattened;
};
@Chinese Alligator try this out
Chinese AlligatorOP
@James4u
if i directly render template object the server is dead with RangeError: Maximum call stack size exceeded
if i directly render template object the server is dead with RangeError: Maximum call stack size exceeded
hmm did you try my code? or your solution? it happens when it falls down into infinite loop
Chinese AlligatorOP
@James4u yep i tried your code. And .... server is dead 

okay should it be recursive?
import React from 'react';
const flattenChildren = (children) => {
const flatList = [];
const recursiveFlatten = (children) => {
React.Children.forEach(children, (child) => {
if (React.isValidElement(child) && child.props && child.props.children) {
recursiveFlatten(child.props.children);
} else {
flatList.push(child);
}
});
};
recursiveFlatten(children);
return flatList;
};
export { flattenChildren };
Chinese AlligatorOP
I may have expressed myself incorrectly. The problem is not in the element tree traversal algorithm. The problem is that I don't understand what this object is represents. and how to extract childrens from it
Chinese AlligatorOP
bump
After using next for a while across different react versions, I’m convinced that it’s never a good idea to inspect the children prop. It should be considered as a black box and just rendered as-is. This is not an answer to your question, but if I was you I would refactor to make it not necessary to parse the value of children.
Never a good idea to combine parsing children with streaming, server side rendering, partial rendering and all those shenanigans in the app router and in react 19/18 canary (which the app router uses)