setting two states with onClick-CodePudding

I am trying to disable one of the button, when clicked but it is not working. onClick is changing two states, one for the text and one to disable the button.

 const [loading, setLoading] = useState();
    const [disable, setDisable] = useState(false);
 
  return (
    <div>
      <p>Data is {loading ? "Loading" : "not Loading"} </p>
      <button
        onClick={() => {
          setLoading(true);
          setDisable(true);
        }}
        disabled={disable}
      >
        ON
      </button>
      <button
        onClick={() => {
          setLoading(false);
          setDisable(false);
        }}
        disabled={disable}
      >
        OFF
      </button>
    </div>
  );

CodePudding user response：

you should set the "OFF" button to disabled={!disable}

  <button
    onClick={() => {
      setLoading(false);
      setDisable(false);
    }}
    disabled={!disable}
  >
    OFF
  </button>