Wrapper Components

Using Wrappers to handle UX/style variations

For Handling Wrapper <div>’s and other markup around component, use composition!

When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags. Parent can read its children by accessing the special this.props.children prop.

const SampleComponent = () => {
  <Parent>
    <Child />
  </Parent>
};

const Parent = () => {
  // You can use class 'bla' or any other classes to handle any style variations for the same markup.
  <div className="bla">
    {this.props.children}
  </div>
};

FYI - Wrapper component can also be made accept a tag name and then used to generate the HTML element. However, usually this is not recommended because you can't add attributes/props to it.

const SampleComponent = () => {
  <Wrap tagName="div" content="Hello World" />
};

const Wrap = ({ tagName, content }) => {
  const Tag = `${tagName}`     // variable name must begin with capital letters
  return <Tag>{content}</Tag>
}

Related links:

• Slides from my talk: Building Multi-tenant UI with React