title: react.js return simple list of links
body: <p>I am beginner in react js , I want to display a simple list of links using react-router after mapping an array.
  this is the error in browser:</p>
  
  <blockquote>
    <p>Warning: Each child in an array or iterator should have a unique "key" prop.</p>
    
    <p>Check the render method of <code>App</code>.
        in BrowserRouter (at App.js:59)
        in App (at index.js:7)</p>
  </blockquote>
  
  <p>this is all my app.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  import Photolist from './photolist';
  // import logo from './logo.svg';
  import './App.css';
  
  class App extends Component {
    constructor(props){
          super(props);
          this.state = {
  
          }
      }
    render() {
  
      const tab_albums = [
        {
          "albumId": 1,
          "id": 1,
          "title": "accusamus beatae ad facilis cum similique qui sunt",
          "url": "http://placehold.it/600/92c952",
          "thumbnailUrl": "http://placehold.it/150/92c952"
        },
        {
          "albumId": 1,
          "id": 2,
          "title": "reprehenderit est deserunt velit ipsam",
          "url": "http://placehold.it/600/771796",
          "thumbnailUrl": "http://placehold.it/150/771796"
        },
        {
          "albumId": 2,
          "id": 66,
          "title": "provident rerum voluptatem illo asperiores qui maiores",
          "url": "http://placehold.it/600/ee0a7e",
          "thumbnailUrl": "http://placehold.it/150/ee0a7e"
        },
        {
          "albumId": 2,
          "id": 67,
          "title": "veritatis labore ipsum unde aut quam dolores",
          "url": "http://placehold.it/600/1279e9",
          "thumbnailUrl": "http://placehold.it/150/1279e9"
        }
      ]; 
      const albumsIds = [];
      
      tab_albums.map((album_model) =&gt; {
          return (
              albumsIds.indexOf(album_model.albumId) === -1 ? albumsIds.push(album_model.albumId) : null
          )
      });
      
      var album_style = {"background": "#cccccc", "marginBottom": "10px", "borderLeft": "5px solid red"};
      var style_div = {"width": "50%", "float": "left"};
  
      const liste_album = albumsIds.map((alb_id) =&gt; {
            return (
              &lt;Router&gt;
                &lt;li key={alb_id} style={album_style}&gt;&lt;Link to={"/album"+alb_id}&gt;Album : { alb_id }&lt;/Link&gt;&lt;/li&gt;
                {/* &lt;Route path="/photolist" component={Photolist}/&gt; */}
              &lt;/Router&gt; 
            )
      });
  
    return (
      &lt;div className="App"&gt;
        &lt;div style={style_div}&gt;
          &lt;ul&gt;{liste_album}&lt;/ul&gt;
        &lt;/div&gt;
        &lt;div style={style_div}&gt;
          &lt;button&gt;wishlist&lt;/button&gt;
          &lt;Photolist /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
       
      ); 
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>thank you for helping...</p>