Iterating over children in stateless components react/react-native

Question

I was working on a react-native application and I created a common component for display list items.

<View style={styles.container}>
  <ItemsWithSeparator style={styles.itemsContainer}>
     <AppRow />
     <AppRow />
  </ItemsWithSeparator>
</View>

Now, my ItemListSeparator is just iterates over the children and renders the list, so I thought I would make this a stateless component.

const ItemsWithSeparator = function ({children,style}) {
  const childrenList = [];
  const length = React.Children.count(children);
  React.Children.forEach(
    children,
    (child,ii) => {
      childrenList.push(child);
      if (ii !== length -1) {
        childrenList.push(
          <View
            key={`separator-${ii}`}
            style={[styles.separator]}
          />
        );
      }
    }
  );
  return (
    <View style={style}>
      {children}
    </View>
  );
};

But this throws an error saying 'React' not found.

However, it works fine with class based components. Following is the code which is working fine.

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) => {
        childrenList.push(child);
        if (ii !== length -1) {
          childrenList.push(
            <View
              key={`separator-${ii}`}
              style={[styles.separator]}
            />
          );
        }
      }
    );
    return (
      <View style={style}>
        {children}
      </View>
    );
  }
}

Can anyone help me understanding this? TIA!!

Update:

I was just trying few something and apparently got his to work:-

const ItemsWithSeparator = function ({children,style,...props}) {
  const childrenList = [];
  const length = React.Children.count(children);
  React.Children.forEach(
    children,
    (child,ii) => {
      childrenList.push(child);
      if (ii !== length -1) {
        childrenList.push(
          <View
            key={`separator-${ii}`}
            style={[styles.separator]}
            {...props}
          />
        );
      }
    }
  );
  return (
    <View style={style}>
      {children}
    </View>
  );
};

But I am still a bit confused on how is this working. If someone could explain I would really be great.

Answer 1

Here is refactored version so you don't have to do this weird React.Children stuff :D Notice that you can return array when mapping children. There you can make if statements if needed.

const ItemsWithSeparator = ({children, style, ...props}) => {
  const finalFields = children.map((child, index) => {
    return [
      child,
      index !== children.length - 1 && (
        <View key={index} {...props} style={styles.separator} />
      )
    ];
  });

  return (
    <View style={style}>
      {finalFields}
    </View>
  );
};