Next.js Discord

Discord Forum

How to iterate dynamic children's

Unanswered
Chinese Alligator posted this in #help-forum
Open in Discord
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

<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

James4u
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
James4u
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 :sunglasses_1:
James4u
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
joulev
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)