score:2

Accepted answer

fixed here: https://codesandbox.io/s/rln4oz4vwq

basic idea: set loading to false by default, because you are not loading anything. on click of button, set loading to true as you truly are. then on completion of async stuff, set loading to false and submitsuccess to true to indicate you are done.

code:

import react from "react";
import reactdom from "react-dom";

import "./styles.css";

class app extends react.component {
  constructor(props) {
    super(props);
    this.state = {
      isloading: false,
      submitsuccess: false
    };
  }

  onclick = () => {
    console.log("click");
    this.setstate({
      isloading: true
    });

    //lets assume you now do some async stuff and after 2 seconds you are done
    settimeout(() => {
      this.setstate({
        isloading: false,
        submitsuccess: true
      });
    }, 2000);
  };

  render() {
    return (
      <div classname="app">
        <button onclick={this.onclick}>click</button>
        {this.state.isloading ? (
          <p>loading...</p>
        ) : this.state.submitsuccess ? (
          <p>success!</p>
        ) : (
          <p>are you sure?</p>
        )}
      </div>
    );
  }
}

const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);

Related Query

More Query from same tag