import React, { PropTypes } from 'react'

import Spinner from '../Spinner'
import Todo from '../Todo'

const TodoList = ({ todos, isFetching }) => {
  if (isFetching) {
    return (
      <Spinner text='Loading' />
    )
  } else {
    return (
      <div>
      {todos.map(todo => {
        return (
          <Todo {...todo} key={todo.id} />
        )
      })}
      </div>
    )
  }
}

TodoList.propTypes = {
  todos: PropTypes.array.isRequired,
  isFetching: PropTypes.bool.isRequired
}

export default TodoList

import React, { PropTypes } from 'react'

import Spinner from '../Spinner'

const TodoList = ({ todos, isFetching }) => {
  if (isFetching) {
    return (
      <Spinner text='Loading' />
    )
  } else {
    return (
      <ul>
      {todos.map(todo => {
        return (
          <li key={todo.id}>{todo.title}</li>
        )
      })}
      </ul>
    )
  }
}

TodoList.propTypes = {
  todos: PropTypes.array.isRequired,
  isFetching: PropTypes.bool.isRequired
}

export default TodoList

--- 
+++ 
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 
 import Spinner from '../Spinner'
+import Todo from '../Todo'
 
 const TodoList = ({ todos, isFetching }) => {
   if (isFetching) {
@@ -9,13 +10,13 @@
     )
   } else {
     return (
-      <ul>
+      <div>
       {todos.map(todo => {
         return (
-          <li key={todo.id}>{todo.title}</li>
+          <Todo {...todo} key={todo.id} />
         )
       })}
-      </ul>
+      </div>
     )
   }
 }
Use todo component in loop

