title: Iterating over children in stateless components react/react-native
body: <p>I was working on a react-native application and I created a common component for display list items.</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>&lt;View style={styles.container}&gt;
    &lt;ItemsWithSeparator style={styles.itemsContainer}&gt;
       &lt;AppRow /&gt;
       &lt;AppRow /&gt;
    &lt;/ItemsWithSeparator&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>Now, my ItemListSeparator is just iterates over the children and renders the list, so I thought I would make this a stateless component.</p>
  
  <pre class="lang-js prettyprint-override"><code>const ItemsWithSeparator = function ({children,style}) {
    const childrenList = [];
    const length = React.Children.count(children);
    React.Children.forEach(
      children,
      (child,ii) =&gt; {
        childrenList.push(child);
        if (ii !== length -1) {
          childrenList.push(
            &lt;View
              key={`separator-${ii}`}
              style={[styles.separator]}
            /&gt;
          );
        }
      }
    );
    return (
      &lt;View style={style}&gt;
        {children}
      &lt;/View&gt;
    );
  };
  </code></pre>
  
  <p>But this throws an error saying 'React' not found. </p>
  
  <p>However, it works fine with class based components. Following is the code which is working fine.</p>
  
  <pre class="lang-js prettyprint-override"><code>class ItemsWithSeparator extends React.Component {
  
    render () {
      const {children,style} = this.props;
      const childrenList = [];
      const length = React.Children.count(children);
      React.Children.forEach(
        children,
        (child,ii) =&gt; {
          childrenList.push(child);
          if (ii !== length -1) {
            childrenList.push(
              &lt;View
                key={`separator-${ii}`}
                style={[styles.separator]}
              /&gt;
            );
          }
        }
      );
      return (
        &lt;View style={style}&gt;
          {children}
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>Can anyone help me understanding this? TIA!!</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I was just trying few something and apparently got his to work:-</p>
  
  <pre class="lang-js prettyprint-override"><code>const ItemsWithSeparator = function ({children,style,...props}) {
    const childrenList = [];
    const length = React.Children.count(children);
    React.Children.forEach(
      children,
      (child,ii) =&gt; {
        childrenList.push(child);
        if (ii !== length -1) {
          childrenList.push(
            &lt;View
              key={`separator-${ii}`}
              style={[styles.separator]}
              {...props}
            /&gt;
          );
        }
      }
    );
    return (
      &lt;View style={style}&gt;
        {children}
      &lt;/View&gt;
    );
  };
  </code></pre>
  
  <p>But I am still a bit confused on how is this working. If someone could explain I would really be great.</p>