title: Extract Data from API and show in another page
body: <p>This question may sound silly to some people, but I am really confused on how to do it</p>
  <p>I have 3 file: App.js, HomePage.js and Profile.js</p>
  <p>App.js :</p>
  <pre><code>import React from &quot;react&quot;
  import { BrowserRouter as Router, Route, Switch } from &quot;react-router-dom&quot;;  
  import HomePage from &quot;./components/HomePage&quot;;
  import Profile from &quot;./components/Profile&quot;
  
  function App() {
    return (
      &lt;Router&gt;
        &lt;Switch&gt;
          &lt;Route path=&quot;/&quot; exact component={HomePage} /&gt;
          &lt;Route exact path=&quot;/profile/:profileId&quot; component= {Profile} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  }  
  export default App;
  </code></pre>
  <p>From here, the default page it will go to is HomePage.js</p>
  <p>HomePage.js:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  class HomePage extends Component {
      constructor() {
          super();
          this.state = {
              userData: [],
          }
      }
      componentDidMount() {
          axios.get(&quot;XXXXXXXX&quot;).then((response) =&gt; {
              const userDataList = response.data.users;
              this.setState({
                  userData: userDataList
              })
          })
      }
      render() {
          const userGrid = this.state.userData.map((user, index) =&gt; {
              return (
                  &lt;div key={index}&gt;
                      &lt;Link to={`/profile/${user.id}`}&gt;
                          &lt;img src={user.profilepicture} /&gt;
                          &lt;p&gt;{user.name}&lt;/p&gt;
                      &lt;/Link&gt;
                  &lt;/div&gt;
              )
          })
          return (
              &lt;div className=&quot;App&quot;&gt;
                  &lt;div className=&quot;card&quot;&gt;
                      &lt;div className=&quot;card__top&quot;&gt;
                          &lt;span className=&quot;card__title&quot;&gt;
                              &lt;p&gt;Select An Account&lt;/p&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;card__bottom&quot;&gt;
                          &lt;div className=&quot;card__table&quot;&gt;
                              {userGrid}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default HomePage;
  </code></pre>
  <p>In HomePage.js, I am able to show the profile picture and name of the user from API.
  In the next page which is Profile.js , I am able to print the ID of the user.</p>
  <p>Profile.js:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  class Profile extends Component{
  
      componentDidMount(){
          const uid = this.props.match.params.profileId;
      }
      render() {
          console.log(this.props.match);
          return(
          &lt;h1&gt;{this.props.match.params.profileId}&lt;/h1&gt;
          )
      }
  }
  export default Profile;
  </code></pre>
  <p>As you can see I am printing the ID of user.
  Here I also want to show the Profile Picture of the user which I selected in HomePage.js</p>
  <p>This I am not able to do it.</p>
  <p>JSON file:</p>
  <pre><code>{ - users: [-{id:1, name:&quot;abc&quot;, profilepicture: &quot;xxxxx.jpeg&quot;}, ]}
  </code></pre>