Recursively cloning React children

gistfile1.js

var RecursiveChildComponent = React.createClass({
  render() {
    return <div>
      {this.recursiveCloneChildren(this.props.children)}
    </div>
  },
  recursiveCloneChildren(children) {
    return React.Children.map(children, child => {
      if(!_.isObject(child)) return child;
      var childProps = {someNew: "propToAdd"};
      childProps.children = this.recursiveCloneChildren(child.props.children);
      return React.cloneElement(child, childProps);
    })
  }
})

Might want to switch _.isObject to React.isValidElement.

Nice piece of code! In my case, I slightly adapted it to render React components deeply nested inside DOM tags:

recursiveCloneChildren(children) {
        return React.Children.map(children, child => {
            var childProps = {};
            if (React.isValidElement(child)) {
                childProps = {someNew: "propToAdd"};
            }
            childProps.children = this.recursiveCloneChildren(child.props.children);
            return React.cloneElement(child, childProps);
        })
}

@u0078867 Maybe need to check child.props additionally..

recursiveCloneChildren(children) {
        return React.Children.map(children, child => {
            var childProps = {};
            if (React.isValidElement(child)) {
                childProps = {someNew: "propToAdd"};
            }
            if (child.props) {
                // String has no Prop
                childProps.children = this.recursiveCloneChildren(child.props.children);
                return React.cloneElement(child, childProps);
            }
            return child;
        })
}

I want to access the children of a ReactComponent, but React wont allow this for some reason... I have this:

`

I want to access this

`

But when debugging the recursive clone function i get:

child.type: function BoughtForm()

child.props.children: undefined

child.props: Object
key: (...)
get key: function ()
ref: (...)
get ref: function ()
proto: Object

The < h1 > element doesn't show up as children. Maybe I am missing something and this is expected behaviour?

Never mind... Works like a charm! It was a very specific context related issue in my codebase.

However I would still like the recursive clone to include the JSX-code inside my child component as well. Is this even possible? Aka I would like to access the JSX inside a self closing element like < BoughtForm />

Recursive cloning is the shit. I used it to stop wasting time on form boilerplate (shameless plug: https://github.com/jedwards1211/react-bind-data)

Neat, but this is pretty scary for performance since you have no idea how deep the rabbit hole goes

Thanks so much. I've been plugging away at this for hours, I was able to get the recursion based on the component type, but every time it traversed the next round of children it would skip rendering the original element (ie. a div tag wouldn't get rendered but its children would).. Thats because I failed to realize that I needed to clone the 'parent-child' and set it's children recursively. Kudos!

Great stuff. Thanks!

Fantastic, was working on an issue like this for a while!

recursiveCloneChildren(children) {
  return React.Children.map(children, (child) => {
    if (!React.isValidElement(child)) return child;
    const props = { ...{ className: '' }, ...child.props };
    let childProps = {};
    if (React.isValidElement(child) && !props.className.includes('exclude-node')) {
      childProps = {
        show: this.state.show,
        toggle: this.toggle,
      };
    }
    childProps.children = this.recursiveCloneChildren(child.props.children);
    return React.cloneElement(child, childProps);
  });
}

if you have SVG icon beneath your elements. this could be helpful.

This helped me to no end. Legends the lot of you!

Recursive cloning React children in Typescript

Use case: A form has a global Enable/Disable switch which should make all the elements in the form disabled.

function recursiveCloneChildren(children: React.ReactElement[], newProps: any) {
  return React.Children.map(children, (child: React.ReactElement) => {
    if (!React.isValidElement(child)) {
      return child
    }
    
    // Eg. String has no props
    if (child.props) {
      // @ts-ignore
      childProps.children = recursiveCloneChildren(child.props.children, newProps);
      return React.cloneElement(child, newProps);
    }
    return child;
  });
}

In usage you need to change type.

render() {
  ...
  { recursiveCloneChildren(children as React.ReactElement[], { disabled: true }) }
   ...
}

Recursive cloning React children in Typescript

Use case: A form has a global Enable/Disable switch which should make all the elements in the form disabled.

function recursiveCloneChildren(children: React.ReactElement[], newProps: any) {
  return React.Children.map(children, (child: React.ReactElement) => {
    if (!React.isValidElement(child)) {
      return child
    }
    
    // Eg. String has no props
    if (child.props) {
      // @ts-ignore
      childProps.children = recursiveCloneChildren(child.props.children, newProps);
      return React.cloneElement(child, newProps);
    }
    return child;
  });
}

In usage you need to change type.

render() {
  ...
  { recursiveCloneChildren(children as React.ReactElement[], { disabled: true }) }
   ...
}

childProps????? maybe newProps !!!

What if a child component has no children, but returns a tree, and you want to recursively clone / modify the returned tree?