title: React Js setState with params when onClick
body: <p>I am using Reactjs to make a simple list of albums and after a click on each item I have to get all photos of this album, so I think  to change the state (album_Id) ..
  the problem is I can't change the state and I dont know how to load the second page (to display all photo of one album) independently.
  please I need your help.</p>
  
  <p>this is my code (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 = {
            currentAlbumId: null,
            CurrentPhotoId: null
          };
          this.updateCurrentAlbum = this.updateCurrentAlbum.bind(this);
      }
  
    updateCurrentAlbum(id) {
      this.setState({currentAlbumId : id})
    }
  
    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 key={alb_id}&gt;
                  &lt;li style={album_style} &gt;
                      &lt;Link to={"/photolist/"+alb_id} onClick={() =&gt; this.updateCurrentAlbum(alb_id)}&gt;
                      Album : { alb_id }
                      &lt;/Link&gt;
                      &lt;Route path="/photolist" component={Photolist}/&gt;
                  &lt;/li&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;/div&gt;
      &lt;/div&gt;
      ); 
    }
  }
  export default App;</code></pre>
  </div>
  </div>
  </p>