redux Loop コンポーネントで幸せになりたい！！

目的

• redux 汎用 Loop コンポーネント
• mapを使ってapiから受け取ったデータを表示していたけど、 ループなんだからやってることは一緒なんじゃね？

Loop

const api = [
 {
   id: "123",
   text:" hoge"
 }
]

<Loop data={api}>
  <Item>
</Loop>

みたいな感じで書きたい。。。

やってみた!!

Loopコンポーネント

初期の実装

まぁ、とりあえずchildrenを表示させるけど
this.props.childrenにどうやって新しくprops渡せばいいんだ？？？？

Loop

const Loop = ({children}) => {
  return (
      <ul>
         {children}
      </ul>
  );
};

改良版 React.cloneElementでpropsを新しく追加

React.cloneElementでpropsを新しく追加

Loop

const Loop = ({data,children}) => {
  return (
      <ul>
         {
          data.map((item,index)=> {
            return (
              React.cloneElement(
                children,{
                 item,
                 key:index
                }
              )
            ) 
          })
        }
      </ul>
  );
};

参考にさせていただいたサイト

• Reactで子要素を渡せるコンポーネントを作りたい
• React.cloneElementでpropsを追加する
• React.Children and the React Top-Level API
• http://stackoverflow.com/questions/40490826/react-cloneelement-and-component-instance
• https://github.com/DefinitelyTyped/DefinitelyTyped/issues/12267

あとはItem コンポーネント側で this.props.itemから取りたい値を取ってくるだけ！
React + redux は奥が深い・・・

多分、いろいろと不備があると思うので(keyとか)アドバイス等あればお願いします！！