title: js function call returns undefined
body: <p>I'm currently struggling with the following issue:</p>
  
  <p>I have a function call like this:</p>
  
  <pre><code>foo = this.initializeFoo(id, array); // console.log() says: undefined
  </code></pre>
  
  <p>And the function:</p>
  
  <pre><code>export function initializeFoo(id, array) {
      axios.get(API_URL + '/route/' + id)
          .then(response =&gt; {
              let copyPayload = [...response.data.foo];
              let copyArray = [...array];
  
          // Some operations  
              copyArray = copyArray.filter(x =&gt; {
                  let exists = false;
                  copyPayload.forEach(payload =&gt; {
                      if (x.id === payload.id) {
                          x["newAttribute"] = id;
                          exists = true;
                      }
                  });
                  return exists
              });
  
              console.log("Returning copyArray", copyArray); // Displays the proper data
              return copyArray;
          })
          .catch(error =&gt; {
              this.setState({loaded: false});
              console.log(error);
          })
  }
  </code></pre>
  
  <p>The question is: Why is the <code>console.log()</code> <code>undefined</code>? I guess it has something to do with the way I <code>return</code> the array within the <code>axios</code> call, but I can't think of another way to do it.</p>
  
  <p>I also don't want to use <code>setState</code> within the function, since I call a few initialize functions and I'd rather want to use one <code>setState</code> after I got all the data initialized.</p>
  
  <p>Thanks in advance!</p>
  
  <p>UPDATE</p>
  
  <p>Can I do it this way:</p>
  
  <pre><code>foo["blub"]  = this.initializeFoo(id, array).then(result =&gt; {
               return result;
          });
  </code></pre>