I have following reactjs code to prevent double clicking a delete button. once the delete button is clicked it should be disabled to prevent multiple time clicks on delete button

this is my code

const [disabled, setDisabled] = useState(false);
  
  
  const linkFollow = (cell, row, rowIndex, formatExtraData) => {
    return (
      <Button
       disabled={disabled}
        onClick={(event) => { 
        setDisabled(true);
          console.log(row["appName"])
          
          
      event.preventDefault();
      axios
        .post("https:/add", {
          data: {
            appName:row["appName"],
            action: "delete"
          },
          
        })
        .then(function (response) {
          toast.success("deleted successfully", {
            position: toast.POSITION.TOP_RIGHT,
            hideProgressBar: true,
            
            });
          setlength(false);
        })
        .catch(function (response) {
          toast.success("deletion failed", {
            position: "top-right",
            
            autoClose: 5000,
            hideProgressBar: true,
          });
            
        
          console.log(response);
        });
       
        
        
        }}
      >
        delete
        
      
      </Button>

i don't know what was my mistake in this delete button is is not disabling

CodePudding user response：

I would add something to state that represents that the button has been clicked. For example hasClicked: false

First click function changes hasClicked:true

then you can simply put the condition in disabled={hasClicked ? true : false}

CodePudding user response：

When you first time click on the button setDisabled this function will call. in this function you set button disabled. that's why you can click one time !