title: Why is the function never reached?
body: <p>So this is probably quite simple but I can't find the solution or what is happening. I am trying to call the sendRecording from the event handler inside the handleRecorder function. But the sendRecording  is never reached:</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  
  declare var MediaRecorder: any;
  
  const sendRecording = () =&gt; async dispatch =&gt; {
    console.log('3');
    const config = {
      headers: {
        'Content-Type': 'application/json'
      }
    };
    const body = JSON.stringify({});
    try {
      const res = await axios.post('/api/recording', body, config);
    } catch (err) {
      const errors = err.response.data.errors;
    }
  };
  
  const handleRecorder = () =&gt; {
    console.log('1');
    sendRecording();
    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream =&gt; {
      const mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start();
  
      const audioChunks: any[] = [];
      mediaRecorder.addEventListener('dataavailable', event =&gt; {
        audioChunks.push(event.data);
      });
  
      mediaRecorder.addEventListener('stop', () =&gt; {
        console.log('2');
        sendRecording();
      });
  
      setTimeout(() =&gt; {
        mediaRecorder.stop();
      }, 3000);
    });
  };
  
  const Recorder = () =&gt; {
    return (
      &lt;div&gt;
        &lt;button className='btn' onClick={handleRecorder}&gt;
          &lt;i className='fa fa-microphone' title='Record' /&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default Recorder;
  </code></pre>
  
  <p>When I click the button, the console prints:
  1
  2
  But never the 3</p>
  
  <p>It actually happens the same when I call the sendRecording function from the beginning of the handleRecorder function. </p>
  
  <p>I'm still learning, it must be something simple that I have not understood, but it is taking me ages to solve this.</p>