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

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

Use todo component in loop
Use todo component in loop

