title: How do I decorate a react component and all its children?
body: <p><a href="https://jsfiddle.net/69z2wepo/81913/" rel="nofollow noreferrer">https://jsfiddle.net/69z2wepo/81913/</a></p>
  
  <p>I am decorating a component tree and adding some meta data to my components. Works wonderfully at the top level component (A); but if I try and decorate my sub components (commented out but un-commenting illustrates the issue) - the render chain breaks and props that get passed down do not render properly (or at all). Does anyone have any insight - I have attached a fiddle above.</p>
  
  <pre><code>   var dec = (t, k, d) =&gt; {
    console.log('hello decoration')
    var el = React.cloneElement(d.value(), {'label': 'my-component-label'})
    return {value: () =&gt; el}
  }
  
  class B extends React.Component{
      constructor(props) {
      super(props)
    }
    //@dec
    render() {
      return &lt;div&gt;
          {this.props.data}
      &lt;/div&gt;
    }
  }
  class A extends React.Component{
      constructor(props) {
      super(props)
    }
  
    @dec 
    render() {
      return &lt;div&gt;
          &lt;B data={99 + 101}/&gt;
      &lt;/div&gt;
    }
  }
  
  ReactDOM.render(
    &lt;A/&gt;,
    document.getElementById('container')
  );
  </code></pre>