Skip to content

Instantly share code, notes, and snippets.

@mathisonian

mathisonian/mycomponent.js

Created November 27, 2017 21:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mathisonian/8878ff5a9b43f9ffcc9fe0cb5ae71f72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mathisonian/8878ff5a9b43f9ffcc9fe0cb5ae71f72 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mathisonian revised this gist Nov 27, 2017. No changes.
  2. mathisonian created this gist Nov 27, 2017.
    47 changes: 47 additions & 0 deletions mycomponent.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    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;