React Container Component

container-component.js

const DivContainerComponent = React.createClass({
   render: function(){
      return (
         <div className={this.props.containerClassName || ""}>
            {this.props.dataList.map((elData, i)=>{
               return React.cloneElement(this.props.children, {data: elData, key: `${(new Date()).getTime()}-${i}`})
            })}
         </div>
      )
   }
})

const ListContainerComponent = React.createClass({
   render: function(){
      return (
         <ul className={this.props.containerClassName || ""}>
            {this.props.dataList.map((elData, i)=>{
               return React.cloneElement(this.props.children, {data: elData, key: `${(new Date()).getTime()}-${i}`})
            })}
         </ul>
      )
   }
})


//Implementation
//  let taskArray = [
//     {task: 'wash cat', isDone: false}, 
//     {task: 'brush dog', isDone: false},
//     {task: 'brush dog', isDone: false}, 

//
//  let TodoComponent = React.createClass({
//     return: function(){
//        return <li>{data.task} | {data.isDone.toString()} </li>
//     }
//  })
//
//  ... 
//  <ContainerComponent containerClassName="todo-container" dataList={taskArray}>
//     <TodoComponent/>
//  </ContainerComponent>
//

module.exports = {
   DivContainerComponent,
   ListContainerComponent
}