title: React - Decorating Children and Handling Keys
body: <p>I'm writing a small component that decorates some children.  Given the following sample:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Child = props =&gt; &lt;div&gt;{props.name}&lt;/div&gt;;
  const Parent = props =&gt; {
    let wrappedChildren = React.Children.map(props.children, c =&gt; {
       return (&lt;Decorator key={c.key}&gt;
         {c}
       &lt;/Decorator&gt;);
    });
  
    return (&lt;div&gt;
      {wrappedChildren}
    &lt;/div&gt;);
  }
  const Consumer = props =&gt; {
       let children = [0, 1, 2].map(num =&gt; {
         return &lt;Child key={num} name={num} /&gt;;
       });
      return &lt;Parent&gt;{children}&lt;/Parent&gt;;
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this code, I'm wanting to take each child and decorate it with some wrapping container or some behaviour. Forgetting for the moment that there may only be one child, I need to give each  instance a key.</p>
  
  <p>Currently I'm assuming that each child does have a key which isn't fantastic, lifting it off the child and applying it to the Decorator directly.</p>
  
  <p>Is this the "correct" way of doing this?  Is there a better way?</p>