import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.PureComponent {
  unwrapChildren() {
    return this.props.children.map((c) => {
      if (c => c.type.name && c.type.name.toLowerCase() === 'wrapper') {
        return c.props.children[0];
      }
      return c;
    });
  }

  getModifiedChildren() {
    const unwrapped = this.unwrapChildren();
    return React.Children.map(this.props.children, (child, i) => {
      const c = unwrapped[i];
      // The component was wrapped, so return
      // it with a modified child
      if (child !== c) {
        return React.cloneElement(child, {
          children: React.cloneElement(c, {
            myCustomProp: 'custom value',
          })
        });
      } else {
        return React.cloneElement(child, {
          myCustomProp: 'custom value',
        });
      }
    })
  }

  render () {
    return (
      <div>
        {this.getModifiedChildren()}
      </div>
    )
  }
}

MyComponent.defaultProps = {
  children: []
};

export default MyComponent;