Disable and enable Submit button in ReactJS

We can disable any kind of button in ReactJs easily. Here we will disable button on checkbox click.Disable and enable Submit button in ReactJS .

See how we can make OTP Timer in ReactJS – https://learncoders.xyz/otp-countdown-timer-in-react/

Download React Project : https://reactjs.org/

Now We will check CHECKBOX Button and on the click of checkbox button We will disable and enable Submit button

 <input type="checkbox" onClick={onCheckboxClick} />

Now we will create state and using that state we will try to control disable and enable functionalities for our Submit Button .

  const [isDisabled, setIsDisabled] = useState(true);
  const [checked, setChecked] = useState(false)

As you can see , We have created two states here one for disable/enable and another for checkbox control

Now,handle onClick function for submit button .

const dataSubmit= () => {
    return checked ? setIsDisabled(true) : setIsDisabled(false);
  };

  const onCheckboxClick = () => {
    setChecked(!checked);
    return dataSubmit();
  };

Now , Fulll code here

import { useState } from "react";

const App = () => {
  const [isDisabled, setIsDisabled] = useState(true);
  const [checked, setChecked] = useState(false);

  const dataSubmit= () => {
    return checked ? setIsDisabled(true) : setIsDisabled(false);
  };

  const onCheckboxClick = () => {
    setChecked(!checked);
    return dataSubmit();
  };

  return (
    <div className="App">
      <input type="checkbox" onClick={onCheckboxClick} />
      <button type="submit" disabled={isDisabled}>
        Submit
      </button>
    </div>
  );
};

export default App;

This way you can handle Enable and disable button in ReactJs.

Read our More Articles

Material UI Table in React

Hide Navbar on Login Page in ReactJs

login form in React with Laravel

Live Search with React and NodeJS

CRUD Operation Using React & Nodejs

How to Load millions record in React

Leave a Reply

Your email address will not be published. Required fields are marked *