How to append "disable" attribute in button using React

Question

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>

Does this answer your question? Disabling and enabling a html input button — Neha Soni
– Neha Soni, Commented Dec 22, 2022 at 11:39

S.Marx · Accepted Answer · 2022-12-22 11:49:08Z

1

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>
  );
}

answered Dec 22, 2022 at 11:49

S.Marx

1,03211 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lalit Joshi · Accepted Answer · 2022-12-22 11:50:58Z

0

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} />

edited Dec 22, 2022 at 11:50

answered Dec 22, 2022 at 11:45

Lalit Joshi

664 bronze badges

Collectives™ on Stack Overflow

How to append "disable" attribute in button using React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related