title: 'Each child in a list should have a unique "key" prop.' When iterating divs
body: <p>I receive this warning:
  &quot;Each child in a list should have a unique &quot;key&quot; prop. Check the render method of <code>Todo</code>. in TodoItem (at ToDo.js:14)&quot;</p>
  <p>Code:</p>
  <pre><code>import React from 'react';
  import TodoItem from './todoItem.js'
  
  class Todo extends React.Component {
    state = {
      elements: [
        {title: 'Zrobić zakupy'},
        {title: 'Opłacić domenę'},
      ]
    }
  
    render() {
      const elements =this.state.elements.map((e, index) =&gt; {
        return &lt;TodoItem element={e} i ={index}/&gt;
      })
      return (
        &lt;div className=&quot;wrapper&quot;&gt;
          &lt;h1&gt;Todo app&lt;/h1&gt;
          {elements}
        &lt;/div&gt;
      );
    }
  }
  
  export default Todo;
  </code></pre>
  <pre><code>import React from 'react';
  
  const TodoItem = props =&gt; {
    return &lt;div className=&quot;card&quot; key={props.i}&gt;{props.element.title}&lt;/div&gt;;
  }
  
  export default TodoItem;
  </code></pre>
  <p>I cannot iterate divs in proper way.
  I find out the key values was implement correctly.<br />
  why I am getting warning?</p>