Pass a wrapper component as props in ReactJS

Question

I am trying to pass a wrapper component as props. Is something like this technically possible in React?

import React, {Component, PropTypes} from 'react';
import ChildComp from './child-comp';

class Comp extends Component {
  render() {
    const { Wrapper } = this.props;
    return (
      <Wrapper>
        <ChildComp />
      </Wrapper>
    );
  }
}

Comp.propTypes = {};

export default Comp;

Answer 1

Yes, it is perfectly possible, and commonly used. The only thing is, as a convention, in JSX capitalized words mean a user defined component, so you'll need to have your properties lowercased and you must capitalize the variable used to hold the component's reference.

import React from 'react';

function HelloWorld () {
  return (
    <span>
      <Foo wrapper={Bar}/>
      <Foo wrapper="h5"/>
    </span>
  );
}

class Bar extends  React.Component {
  render() {
    return <h1>{this.props.children}</h1>
  }
}

class Foo extends React.Component {
  render() {
    // the variable name must be capitalized
    const Wrapper = this.props.wrapper;
    return (
      <Wrapper><p>This works!</p></Wrapper>
    );
  }
}

For native components you can pass a String, like so: <Foo wrapper="h1"/>. This works because JSX is just a syntax sugar for React.createElement('h1',props, children)

Answer 2

You can wrap components in a number of ways. However, the most common are:

1. Render children

When rendering children, the jsx explicitly uses the wrapping component:

<Wrapper>
  <Child />
</Wrapper>

and the Wrapper component looks like:

export default class Wrapper extends Component {
  render() {
    return (
      <div>
         { this.props.children }
      </div>
    );
  }
}

2. Higher order component

A higher order component (HOC), is a way to mixin functionality without necessarily changing the jsx markup. You can change the jsx, but you can also mixin functionality without changing the jsx.

Using the HOC looks like this:

const Wrapped = Wrapper(Child);

...

<Wrapped />

And the HOC itself would look like:

export default Child => class extends Component {
  render() {
    return (
      <div>
         <Child />
      </div>
    );
  }
}