title: Call one function after another has set item in local storage
body: <p>I am currently trying to perform two operations based on my <strong>local storage</strong> content. </p>
  
  <p>My project uses ReactJS but since I don't know how to set the state globally, or propagate my data back and forward through parent and child component, I decided to do it with local storage.  </p>
  
  <p>I am trying to assign roles and permissions to a logged in user. In order to do that, I have two separate fetch functions which I execute whenever my user is authenticated by the <strong>identity federation broker</strong>.</p>
  
  <p>Here is my first function in a separate <strong>UserAuthorization.js</strong> file:</p>
  
  <pre><code>function UserAuthorisation() {
    const userid = localStorage.getItem("userid"); //GETS THE TOKEN SET BY IFB.
  
    if (userid !== null) {
      fetch("https://api.myjsons.com/binz/examplebin")
        .then(response =&gt; response.json())
        .then(response =&gt; {
          for (let eachUser = 0; eachUser &lt; response.length; eachUser++) {
            if (userid === response[eachUser].id) {
              localStorage.setItem("role", response[eachUser].role);
            }
          }
        });
    } else {
      console.log("We don't have the user ID item");
    }
  }
  
  export default UserAuthorisation;
  </code></pre>
  
  <p>Here is the second function which is supposed to run after <strong>UserAuthorization.js</strong>:</p>
  
  <pre><code>function FetchUserPermissions() {
    const userRole = localStorage.getItem("role");
    console.log(userRole);
    if (userRole !== null) {
      fetch("https://api.myjsons.com/binz/xxzsz")
        .then(response =&gt; response.json())
        .then(response =&gt; {
          for (let permission = 0; permission &lt; response.length; permission++) {
            if (permission === response[permission]) {
              console.log(response[permission], "&lt;&lt;&lt;&lt;&lt;&lt;&lt; This is the user Role");
              return response[permission];
            }
          }
        });
    } else {
      console.log("not loggedin === no user permissions.");
    }
  }
  
  export default FetchUserPermissions;
  </code></pre>
  
  <p>The issue that I'm having is that since I just call my functions by their names, the second one <strong>FetchUserPermissions</strong> prints out a <strong>null</strong> instead of the <strong>userRole</strong>. </p>
  
  <p>I thought that it was because I tried to grab the role from local storage before it was set but when I changed to function to <strong>async await</strong> I got a result <code>cannot read property .length of undefined</code></p>
  
  <p>How can I call my second function after the first one and grab my <strong>role</strong> element from the local storage ??</p>
  
  <p>Apologies in advance for the silly question..</p>