title: React - how to pass a function with return statement as a prop
body: <p>I have a strange problem that keeps me scratching my head. I'm trying to get data from a api and pass the returned data to a component (as a prop) with React Router. However the returned data is 'undefined'.</p>
  
  <p>MyRoutes.js:</p>
  
  <pre><code>let refreshAvailability = (profile_index) =&gt; {
      let fetch = new DataFetch();
      fetch.get(`/info/${profile_index}`, (err, res) =&gt; {
          let username = res[Object.keys(res)[0]].username;
          if(username !== undefined) {
              setTimeout(() =&gt; {return getStatus(username)}, 0);
              setInterval(() =&gt; {return getStatus(username)}, 10000); //Refresh every 10 seconds
          }
      });
  }
  
  let getStatus = (username) =&gt; {
      let userStatus = new userStatus();
      userStatus.getStatus(available =&gt; {
          //If i place console.log(available) here it will print the result, but when i return it, its undefined.
          return available;
      });
  }
  
  const myRoutes = () =&gt; (
    &lt;BrowserRouter&gt;    
              &lt;Route exact path='status/:profile_index' render={(props) =&gt; (
                  &lt;Status {...props} available={refreshAvailability} /&gt;
              )}/&gt;
    &lt;/BrowserRouter&gt;
  );
  
  export default MyRoutes;
  </code></pre>
  
  <p>Status.js:</p>
  
  <pre><code>componentDidMount(){
      let userIndex = this.getUserIndex();
      let userStatus = this.props.available(userIndex);
  
      console.log(userStatus); //This prints undefined
  }
  </code></pre>
  
  <p>Somehow the problem seems to be in the getStatus function. 
  If i log the output of the api there i can see it logging in the Status component, but when i return it it returns 'undefined'.</p>
  
  <p>This leaves me to the question how React is handling functions with a return statement as a prop? Is it any different than passing a function without return? Or am i overlooking things in my code?</p>