title: React: Mapping children of a parent component
body: <p>So I want to add certain styles to any child that's appended to a component. Let's say the parent component  is called <code>Section</code> and children are called <code>Card</code>in this case. in <code>Section.js</code> I am trying this: -</p>
  
  <pre><code>renderChildren = () =&gt;{
    return React.Children.map(this.props.children, (child, i)=&gt;{
      let el = React.cloneElement(child,{
        style: {opacity:0.5}
      })
      return el
    })
  }
  
  render(){
    &lt;ScrollView&gt;
         {this.renderChildren()}
     &lt;/ScrollView&gt;
  }
  </code></pre>
  
  <p>The above approach doesn't work for me. And I would like to know why. Also is there a way where I could map across the children and wrap them in a new component? Something like this;</p>
  
  <pre><code>this.props.children.map(Child =&gt; &lt;Wrapper&gt; &lt;Child/&gt; &lt;/Wrapper&gt; )
  </code></pre>