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);
    })
  }
})

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?