title: ReactJS | Cannot get data on ComponentDidMount
body: <p>I am fetching data from a local Mock-API. The data that the server is sending have the following format:</p>
  
  <pre><code>module.exports = [
    {
      username: "george",
      email: "george@test.com",
      group: "foo",
      loggedIn: true
    },
    {
      username: "nick",
      email: "nick@test.com",
      group: "bar",
      loggedIn: false
    }
  ];
  
  </code></pre>
  
  <p>Basically, a list of Users as you can see. The unique I.D for each user is their <code>username</code>. In my ReactJS U.I, I have a list of users. When I click on one of the users, I get redirected to a new page, and the url, changes fine, depending on the of the user I clicked</p>
  
  <p>But I cannot fetch any data regarding that user. I get an empty string printed with <code>JSON.Stringify</code>. This is my cocde:</p>
  
  <pre><code>/* eslint-disable react/prefer-stateless-function */
  import React, { Component, Fragment } from 'react';
  import PropTypes from 'prop-types';
  
  import PageHeader from './PageHeader';
  import Breadcrumb from './Breadcrumb';
  import Role from 'shared/common/enums/Role';
  
  import { getUser } from '../../config/service';
  
  class UserDetailsScreen extends Component {
    state = {
      inEditMode: false,
      user: {},
      error: null
    };
  
    componentDidMount() {
      this.fetchUser();
    }
  
    fetchUser = () =&gt; {
      getUser().then(({ data }) =&gt; {
        this.setState({ user: data });
      });
    };
  
    render() {
      const {user } = this.state;
      return (
        &lt;div className="container-fluid"&gt;
          &lt;div&gt;&lt;pre&gt;{JSON.stringify(user, null, 2)}&lt;/pre&gt;&lt;/div&gt;
          {user &amp;&amp; (
            &lt;Fragment&gt;
              &lt;Breadcrumb
                items={[
                  {
                    name: 'Users',
                    url: 'users'
                  },
                  {
                    name: user.username,
                    url: `${user.username}`
                  }
                ]}
              /&gt;
              &lt;h1 className="heading-title"&gt;{user.username}&lt;/h1&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  export default UserDetailsScreen;
  
  </code></pre>
  
  <p>The <code>getUser()</code>, is a function that listens on my local endpoint. This is the endpoint: <code>GET_USER: name =&gt;</code><a href="http://localhost:5000/api/user/" rel="nofollow noreferrer">http://localhost:5000/api/user/</a>${name}<code>,</code>.</p>
  
  <p>And here is the <code>getUser()</code>:</p>
  
  <pre><code>export const getUser = name =&gt; {
    const options = {
      method: httpMethod.GET,
      url: endpoint.GET_USER(name)
    };
    return instance(options);
  };
  </code></pre>
  
  <p>This is the Dyson Server instance for getting the Specific user with the username as a unique id:</p>
  
  <pre><code>const users = [
      {
      username: "george",
      email: "george@test.com",
      group: "foo",
      loggedIn: true
    },
    {
      username: "nick",
      email: "nick@test.com",
      group: "bar",
      loggedIn: false
    }
  ]
  
  module.exports = {
    path: '/api/user/:username',
    method: 'GET',
    template: (pathParameters) =&gt; {
      return users.find((user) =&gt; {
        return user.username === pathParameters.username;
      })
    }
  };
  </code></pre>
  
  <p>Do you see any mistake with it??</p>