title: Updating my imported variable's value in React.js
body: <p>I am refractoring an app I've build using React.js. I am exporting a variable from the global scope of <code>Spotify.js</code> and importing it in two other files <code>App.js</code> and <code>Button.js</code>.
  After calling a function from <code>Spotify.js</code> that sotres a new value to the variable, It's new value is exported to 'Button.js' but stays an empty string in 'App.js'.</p>
  
  <p>Your help would be appriciated :)</p>
  
  <pre><code>
  export let userAccessToken = '';
  export const Spotify = {
    ...
    getUserAccessToken (){
      //stores a new string to userAccessToken.
      }
    }
  </code></pre>
  
  <pre><code>  import {userAccessToken, Spotify} from '../../util/Spotify';
  
    export class App extends React.Component {
      //a conditional rendering happens depending on if(!userAccessToken)
    }
  </code></pre>
  
  <pre><code>  import {userAccessToken, Spotify} from '../../util/Spotify'
  
    export class Button extends React.Component {
  
        componentDidMount() {
  
        if (!userAccessToken) {
  
          console.log(`Button's UAT before calling the fn: ${userAccessToken}`)
          Spotify.getUserAccessToken();
          console.log(`Button's UAT after calling the fn: ${userAccessToken}`);
  
        } 
      }
  
    ...
  
    }
  </code></pre>