title: How to avoid 'children with same key' when replacing state in ReactJs component
body: <p>I have created a React Component that renders a set of sub-elements given an array of ids. The array of ids is kept in the state of the parent component, and then I run some ajax calls based on the ids to fetch data to render. The fetched data is stored in a separate data array in the state. The rendered components <em>use the id as key</em>. </p>
  
  <p>The ids can change based on actions outside of the component, so I use setState on the component to replace the array. <em>The updated id-state will probably contain some of the same ids as the in the original array.</em>  At the same time I empty the 'data array' so that everything will be rendered again.</p>
  
  <p>When I do this I sometimes get the key-warning:</p>
  
  <blockquote>
    <p>Warning: flattenChildren(...): Encountered two children with the same
    key. Child keys must be unique; when two children share a key, only
    the first child will be used.</p>
  </blockquote>
  
  <p>The new array does not contain any duplicates. So why does it happen, and what can I do to avoid this? </p>
  
  <p>Edit: Added some code by request. Note: I am using the <a href="https://www.npmjs.org/package/react-infinite-scroll">Infinite Scroll module</a>. Could this be causing it?</p>
  
  <h2>Initial state:</h2>
  
  <pre><code>getInitialState: function() {
    return {
      hasMore: true,
      num: 0,
      movieIds: this.props.movieIds,
      movies: []
    };
  },
  </code></pre>
  
  <h2>Render function:</h2>
  
  <pre><code>render: function() {
    var InfiniteScroll = React.addons.InfiniteScroll;
  
    return (
      &lt;InfiniteScroll
          pageStart={0}
          loadMore={this.loadMore}
          threshold='20'
          hasMore={this.state.hasMore}&gt;
          &lt;ul className="movieList"&gt;
            {this.state.movies}
          &lt;/ul&gt;
      &lt;/InfiniteScroll&gt;       
  );
  }
  </code></pre>
  
  <h2>Simplified load more:</h2>
  
  <pre><code>comp = this;
  $.ajax( {
    url: url,
    contentType: "json",
    success: function (data) {
      var m = createMovieLi(data);
      var updatedMovies = comp.state.movies;
      updatedMovies[num] = m;
      comp.setState({movies: updatedMovies});
    }
  });
  </code></pre>
  
  <p>And finally when updating outside the component:</p>
  
  <pre><code>movieBox.setState({
    hasMore: true,
    num: 0,
    movieIds: filteredIds,
    movies: []
  });
  </code></pre>