React cloneElement and component instance

Question

I have the following higher order component that I am trying to wrap in a container element that is supplied as a prop:

import React, { PropTypes } from 'react';

export default (Component) => {
  return class extends React.Component {
    static propTypes = {
      containerElement: PropTypes.element
    }

    static defaultProps = {
      containerElement: <div />
    };

    componentDidMount() {
      console.log(this.el);
    }

    render() {
      const containerProps = {
        ref: (el) => this.el = el
      };

      return React.cloneElement(containerElement, containerProps, Component);
    };
  }
}

I then wrap a component like this:

export default AnimationComponent(reduxForm({
  form: 'newResultForm',
  validate
})(NewResultForm));

But when I log the element in componentDidMount it is an empty <div/>.

Why is the passed in component not a child of the newly created container element?

Jake Hoffman · Accepted Answer · 2016-11-08 22:54:55Z

2

Your method of writing a Higher Order Component is a little unorthodox. React developers typically don't have to write functions that accept components and return a new class definition unless they're writing something like redux-form itself. Perhaps instead of passing Component as an argument, see if passing it in props.children will work for you:

<AnimationComponent>{NewResultForm}</AnimationComponent>

I'd define AnimationComponent like the following:

export default class AnimationComponent extends React.Component {
    static propTypes = {
        containerElement: React.PropTypes.element
    };

    static defaultProps = {
        containerElement: <div />
    };

    render () {
        // For each child of this component,
        // assign each a ref and store it on this component as this[`child${index}`]
        // e.g. this.child1, this.child2, ...
        // Then, wrap each child in the container passed in on props:

        return React.Children.map(this.props.children, (child, index) =>
            React.cloneElement(
                this.props.containerElement,
                {ref: ref => this[`child${index}`] = ref},
                React.cloneElement(child)
            )
        );
    }
}

Instead of wrapping the form component in AnimationComponent, just export the connected form class:

export default reduxForm({
    form: 'newResultForm',
    validate
})(NewResultForm));

Now instead of being stuck with how AnimationComponent was configured in NewResultForm's file, we can configure it to our liking where we end up rendering the form. In addition to providing flexibility, the information needed to configure AnimationComponent will be more pertinent where it gets rendered:

export default class MyApp extends React.Component {
    render() {
        return (
            <AnimationComponent containerComponent="span">
                <NewResultForm />
            </AnimationComponent>
        );
    }
}

I hope this helped!

edited Nov 8, 2016 at 22:54

answered Nov 8, 2016 at 19:00

Jake Hoffman

6866 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dagda1 Over a year ago

containerElement can be a component, e.g. containerElement: <div />

Jake Hoffman Over a year ago

You're right, my mistake. I was assuming the same rules for createElement and createFactory applied also to cloneElement. I'll remove that part from my answer. Thanks for pointing this out.

dagda1 Over a year ago

thanks, also you are just returning React.children.map which is not a react element. i used your approach only it was react.clonelement(containerelement, {ref: ref => this.el = ref}, this.props.children)

Jake Hoffman Over a year ago

Well, children.map will return React.cloneElement(...). for each child, so you're right in that it's not an element but since this arrow function is invoked immediately, what gets returned is the result of each call to this function from the map. This allows you to have more than one child on AnimationComponent without breaking it.

dagda1 Over a year ago

have you tried to run the code? it will not work this way

|

Collectives™ on Stack Overflow

React cloneElement and component instance

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related