title: How to fix reactjs warning: each child in an array should have a unique prop...?
body: <p>I am running my reactjs app and getting a warning in my console:</p>
  
  <blockquote>
    <p>Warning: Each child in an array or iterator should have a unique "key"
    prop. Check the render method of <code>AppointmentsContainer</code></p>
  </blockquote>
  
  <p>My component looks like this:</p>
  
  <pre><code>export default class AppointmentsContainer extends Component {
  
      constructor(props) {
          super(props);
      }
  
      render() {
          //todo remove
          //debugger;
  
          let appointments = mockData.data;
  
          return (
              &lt;div&gt;
                  //loop through the appointments
                  {appointments.map(function(a,i){
                      //todo remove
                      //console.log('testing=a', a);
                      return &lt;p&gt;&lt;Appointment key={i}/&gt;&lt;/p&gt;
                  })}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>I am passing in a key now but still the warning comes up? How can I fix this?</p>