How to append "disable" attribute in button using React-CodePudding

I am working on Reactjs/nextjs, And i want to append/remove "disable" attribute,how can i do this ? Here is my current code

const handleSubmit = (e) => {
    e.preventDefault();
    //Should append "disable" on submit button
    axios
    .post("xxxxxxxxxxxxxxxxxxxxxxxxxxx",data
    )
    .then(function (response) {
       //Should remove "disable" after response
    }
    });
}

<form className="row" id="home_contact_form" onSubmit={handleSubmit}>
<input type="submit" value="send" className="sendbtn" id="sendbtn" />
</form>

CodePudding user response：

You should create a useState, setting true or false during the petition

example:

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [isDisabled, setIsDisabled] = useState(false);

  const handleSubmit = () => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => {
        setIsDisabled(true);
        return response.json();
      })
      .then((json) => console.log(json))
      .finally(() => setIsDisabled(false));
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button disabled={isDisabled} onClick={handleSubmit}>
        Submit
      </button>
    </div>
  );
}

CodePudding user response：

You can create a boolean state for this job, initially, your state should be false when handleSubmit function is called then set the state to true and once you get the response back from the API then update the state to false again.

then you can simply use that state inside your input

<input type="submit" value="send" className="sendbtn" id="sendbtn" disabled={isDisabled} />