title: Preserve array index inside react clone child loop
body: <p>I have strange issue with index not being preserved while looping and cloning 
  react children. Here is code in question :</p>
  
  <pre><code>// Table Body component
  const DataBody = ({
    resource,
    children,
    ids,
    data,
    ...rest
  }) =&gt; (
    &lt;tbody {...rest}&gt;
      {ids.map((id, rowIndex) =&gt; (
        &lt;TableRow key={id}&gt;
          {React.Children.map(children, (field, index) =&gt; {
            return (
              &lt;Cell
                key={`${id}-${field.props.source || index}`}
                record={data[id]}
                {...{ field, index, resource }}
              /&gt;
            )
          })}
        &lt;/TableRow&gt;
      ))}
    &lt;/tbody&gt;
  )
  
  // Table Cell component
  const Cell = ({ classes, field, index, record, resource, theme, ...rest }) =&gt; {
    return (
      &lt;td className={mapToCSSModule(classes, theme)} {...rest}&gt;
        {React.cloneElement(field, { record, resource, index })}
      &lt;/td&gt;
    )
  }
  
  // Table data component
  const IndexField = ({
    format,
    index,
    tag: Tag = 'span',
    ...props
  }) =&gt; {
    const no = index + 1
    return &lt;Tag {...props}&gt;{format ? format(no) : no}&lt;/Tag&gt;
  }
  </code></pre>
  
  <p>Now, the problem is that index is always 0 inside the IndexField but in Cell it's value is OK, like when we are lost inside a loop/closure which always returns last value of the passed variable.
  Is there a clean way to handle elegantly this ?</p>
  
  <p>EDIT: Added main component that is looping trough the data, note that this is streamed down version (original is fully working, only thing that is non-functional is the index).</p>