title: React unique "key" error
body: <p>I'm going through a tutorial for todo list in React and ran into the following error, I have spent quite a time and just can't find the mistake..here is the error and the code for the component and this is the code for the course repo(problem appears on this commit):</p>
  
  <p><a href="https://github.com/andrewjmead/react-course-todo-app/commit/0521f151705f78cb9f8d69262eb093f1431cb9ca" rel="nofollow noreferrer">https://github.com/andrewjmead/react-course-todo-app/commit/0521f151705f78cb9f8d69262eb093f1431cb9ca</a></p>
  
  <p>Any help much appreciated.</p>
  
  <p>Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of <code>TodoList</code>. See fb.me/react-warning-keys for more information.</p>
  
  <p>Also there is an error in terminal, for the spread operator in case TOGGLE_TODO </p>
  
  <pre><code>return {
  ...todo, // here
  completed: nextCompleted,
  completedAt: nextCompleted ? moment().unix() : undefined
  };
  
  var React = require('react');
  var { connect } = require('react-redux');
  import Todo from 'Todo';
  var TodoAPI = require('TodoAPI');
  
  export var TodoList = React.createClass ({
      render: function() {
          var { todos, showCompleted, searchText } = this.props;
          var renderTodos = () =&gt; {
              if(todos.length === 0) {
                  return (
                      &lt;p className="container__message"&gt;No tasks&lt;/p&gt;
                  );
              }
              return TodoAPI.filterTodos(todos, showCompleted, searchText).map((todo) =&gt; {
                  return (
                      //add unique key prop to keep track of individual components
                      &lt;Todo key={todo.id} {...todo} /&gt;
                  );
              });
          };
          return (
              &lt;div&gt;
                  {renderTodos()}
              &lt;/div&gt;
          );  
      }
  });
  
  export default connect(
      (state) =&gt; {
          return state;
      }
  )(TodoList);
  </code></pre>
  
  <p>Reducers:</p>
  
  <pre><code>var uuid = require('uuid');
  var moment = require('moment');
  
  export var searchTextReducer = (state = '', action) =&gt; {
      switch (action.type) {
          case 'SET_SEARCH_TEXT':
              return action.searchText;
          default: 
              return state;
      };
  };
  
  export var showCompletedReducer = (state = false, action) =&gt; {
      switch (action.type) {
          case 'TOGGLE_SHOW_COMPLETED':
              return !state;
          default: 
              return state;
      };    
  };
  
  export var todosReducer = (state = [], action) =&gt; {
      switch(action.type) {
          case 'ADD_TODO':
              return [
                  ...state,
                  {
                      text: action.text,
                      id: uuid(),
                      completed: false,
                      createdAt: moment().unix(),
                      completedAt: undefined                   
                  }
              ];
          case 'TOGGLE_TODO':
              return state.map((todo) =&gt; {
                  if(todo.id === action.id) {
                      var nextCompleted = !todo.completed;
  
                      return {
                          ...todo,
                          completed: nextCompleted,
                          completedAt: nextCompleted ? moment().unix() : undefined
                      };
                  } else {
                      return todo;
                  }
              });
          case 'ADD_TODOS':
              return [
                  ...state,
                  ...action.todos
              ];
          default: 
              return state;
      }
  };
  
  
  Webpack:
  
  var webpack = require('webpack');
  
  module.exports = {
    entry: [
      'script!jquery/dist/jquery.min.js',
      'script!foundation-sites/dist/js/foundation.min.js',
      './app/app.jsx'
    ],
    externals: {
        jquery: 'jQuery'
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
        })
    ],
    output: {
      path: __dirname,
      filename: './public/bundle.js'
    },
    resolve: {
      root: __dirname,
      modulesDirectories: [
          'node_modules',
          './app/components',
          './app/api'
      ],
      alias: {
          applicationStyles: 'app/styles/app.scss',
          actions: 'app/actions/actions.jsx',
          reducers: 'app/reducers/reducers.jsx',
          configureStore: 'app/store/configureStore.jsx'
      },
      extensions: ['', '.js', '.jsx']
    },
    module: {
      loaders: [
        {
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015']
          },
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/
        }
      ]
    },
    devtool: 'cheap-module-eval-source-map'
  };
  </code></pre>