sequentially execute states.

seqExecuteStates.jsx

import React from "react";
import { render } from "react-dom";

import "./styles.scss";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 1 };
  }

  render() {
    return (
      <div>
        <button
          onClick={async () => {
            const seqExecuteStates = counter => {
              new Promise(resolve => {
                this.setState(
                  () => {
                    return { counter };
                  },
                  () => {
                    resolve();
                  }
                );
              });
            };
            await seqExecuteStates(2);
            console.log("counter", this.state.counter);
            await seqExecuteStates(3);
            console.log("counter", this.state.counter);
            await seqExecuteStates(4);
            console.log("counter", this.state.counter);
          }}
        >
          {this.state.counter}
        </button>
      </div>
    );
  }
}

render(<App />, document.getElementById("app"));