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;

Props Proxy [Higher order components](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.aosc7lsuy) may be what you are looking for. Basically a wrapping function that passing the component around. — Martin Dawson, Dec 23 '16 at 10:02
HOC Documentation: http://stackoverflow.com/documentation/reactjs/1185/components/4649/creating-components#t=20161223100405611594 — Davin Tryon, Dec 23 '16 at 10:05
Does this answer your question? [How to pass in a react component into another react component to transclude the first component's content?](https://stackoverflow.com/questions/25797048/how-to-pass-in-a-react-component-into-another-react-component-to-transclude-the) — Michael Freidgeim, May 01 '20 at 13:51

Tiago Engel · Accepted Answer · 2017-05-01T13:09:15.590

50

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)

edited May 01 '17 at 13:09

answered Dec 23 '16 at 10:40

Tiago Engel

3,533
1
17
22

Great answer! is it going to work if Wrapper is not a react component, but just a native HTML div? – Shota Dec 23 '16 at 11:41
1

I'm not sure how you'd pass a native component, one solution that works is a functional component ` (
{children}
)}/>` – Tiago Engel Dec 23 '16 at 11:51
Found a better way, I added to my answer. – Tiago Engel Dec 23 '16 at 12:00
Can I add a className to h1? – Shota Dec 23 '16 at 12:01
In the `Wrapper` yes, `Wrapper className="foo"` but directly in the place you're passing it as a prop, no. You can pass another prop to use as the `className` for this component. – Tiago Engel Dec 23 '16 at 12:04
Awesome, exactly what I was looking for. – r3wt Feb 15 '18 at 18:23

score 1 · Answer 2 · answered Dec 23 '16 at 10:38

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

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

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

score 1 · Answer 3 · edited Nov 04 '17 at 00:46

https://codepen.io/keshav1706/pen/eWMZwL?editors=0010

here's a codepen for simple solution. `

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

class ComponentTwo extends React.Component {
  render() {
    return(
      <h4>hello</h4>
    )
  }
}
class ComponentThree extends React.Component {
  render() {
    return(
      <h4>component three</h4>
    )
  }
}
ReactDOM.render(
    <div>
      <ComponentOne> <ComponentThree/></ComponentOne>
    </div>,
  document.getElementById('root')
);

`

Pass a wrapper component as props in ReactJS

3 Answers3

{children}

Linked