title: ReactJS - How to queue requests (fast button clicks), and handle responses consecutively?
body: <p>The sub component below is supposed to display navigation buttons and render the appropriate result on button press (first, next, prev, last).  Unfortunately, due to the asynchronous nature of inputs (fast button presses), I can not capture all button presses to process in order.   I modified the sub component to be as simple as possible, but unfortunately it does not even respond to button presses, because I am not sure how to handle changes to the property, namely this.requests?</p>
  <p>How do I make this work according to the intended behavior?</p>
  <p>Sub Component</p>
  <pre><code>import React from 'react';
  
  export class EditRiskNavigationButtons extends React.Component {
      constructor(props){
          super(props)
          this.state = {
              riskid : props.riskId
          }
          this.requests = []
      }
      queueRequest = (request) =&gt; {
          this.requests.push(request);
      }
      handleNextRequest = () =&gt; {
          if (this.requests.length) {
              return this.props.getRisk(this.requests.shift());
          }       
      }
      render() {
          return (
              &lt;div&gt;
                  &lt;input type=&quot;button&quot; value=&quot;First&quot; onClick={this.queueRequest.bind(this, 'first')} /&gt;
                  &lt;input type=&quot;button&quot; value=&quot;Prev&quot;  onClick={this.queueRequest.bind(this, 'prev')} /&gt;
                  &lt;input type=&quot;button&quot; value=&quot;Next&quot;  onClick={this.queueRequest.bind(this, 'next')} /&gt;
                  &lt;input type=&quot;button&quot; value=&quot;Last&quot;  onClick={this.queueRequest.bind(this, 'last')} /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p>Main Component</p>
  <pre><code>import React from 'react';
  import { render } from 'react-dom/cjs/react-dom.development';
  import { ThemeProvider } from 'styled-jss';
  import { formatDateMDY } from '../../common/Functions';
  import { EditRiskNavigationButtons } from './EditRiskNavigationButtons';
  //import './EditRisk.jss';
  
  class EditRisk extends React.Component {
    constructor(props) {
      super(props)
      this.formatDateMDY = formatDateMDY.bind(this);
      this.getRisk = this.getRisk.bind(this);
      this.state = {
        error: null,
        isLoaded: false,
        risk: [],
        riskid: 0,
        riskAPIUriParams: '',
        message: ''
      };
    }
    getRisk = (gotoRisk = 'first') =&gt; {
      this.state.riskAPIUriParams = (this.state.riskid || &quot;&quot;) + &quot;/&quot; + gotoRisk
      if (this.state.riskid != 0)
        this.state.riskAPIUriParams = &quot;/&quot; + this.state.riskAPIUriParams;
      return fetch(&quot;http://projectaim/api/risks&quot;+this.state.riskAPIUriParams)
      .then(res =&gt; res.json())
      .then(
        (result) =&gt; {
          this.setState({
            isLoaded: true,
            risk: result.data,
            riskid: result.data.riskid,
            message: result.message
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) =&gt; {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
    }
    componentDidMount() {
      if (!this.state.isLoaded)
        this.getRisk('first');
    }
    handleSubmit(event){
      
    }
    render() {
      const { error, isLoaded } = this.state;
      if (error) {
        return &lt;div&gt;Error: {error.message}&lt;/div&gt;;
      } else if (!isLoaded) {
        return &lt;div&gt;Loading...&lt;/div&gt;;
      } else {
           return (
            &lt;div id=&quot;formcontainer&quot;&gt;
              &lt;div id=&quot;myeditform&quot;&gt;   
                &lt;form id=&quot;form&quot; name=&quot;EditRisk&quot; ng-submit=&quot;&quot;&gt;
                  &lt;div class=&quot;layout&quot;&gt;&lt;/div&gt;
                    &lt;EditRiskNavigationButtons getRisk={this.getRisk} /&gt;
                    {JSON.stringify(this.state.risk.riskid)}
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
      }
    }
  }
  render(&lt;EditRisk/&gt;, document.getElementById(&quot;root&quot;))
  </code></pre>