content: import React, { Component } from 'react';
  import TodoItem from './TodoItem';
  import AddTodo from './AddTodo';
  import {connect} from 'react-redux';
  import { Link } from 'react-router-dom';
  import { toggleCompleted } from './actions';
  
  class TodoList extends Component {
    render() {
      return (
        <div className="centered">
          <Link to="/todoDetails">Create Todo</Link>
          <AddTodo />
          <ul className="todo-list">
            {this.props.todos.map((todo, index) => <TodoItem key={index} todo={todo} onTodoClicked={(evt) => this.props.dispatch(toggleCompleted(index))}/>)}
          </ul>
        </div>
      );
    }
  }
  
  export default connect(state => state)(TodoList);
  