Disable/Enable submit button in React JS USING FUNCTION

Question

I want to disable/enable a form submit button using a function.
Here is my code to explain what I want:

isDisabled = () => {
    //logic to define if button should be disabled or not
    //return boolean true or false based on that
}


render() {
    return (
        <form className="forgot-password-form">
            //form fields
            <input type="submit" value="Submit" disabled={this.isDisabled} />
        </form>
    );
}

This is just to show an idea what I want to do :) Of course render() will be in component and all.

Currently it gives me warning:

Warning: Invalid value for prop disabled on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

Thank you all for your help.

are you using onSubmit? if so you can just have a helper that returns the code you want to execute if not disabled and if disabled it just runs a function that returns false — Eric Hasselbring
– Eric Hasselbring, Commented Feb 20, 2018 at 14:58
onSubmit will run when you click on submit, I don't want to let a user click on submit button if form is not having certain conditions fulfilled. Kind of same like invalid functionality in angular which comes out of the box. — Abhay Maurya
– Abhay Maurya, Commented Feb 20, 2018 at 14:59
@ RIYAJ KHAN I dont understand how that answers my question :) You are disabling it always and making a function call onClick :D — Abhay Maurya
– Abhay Maurya, Commented Feb 20, 2018 at 15:01
If you can disable when the inputs of the form are empty, you can check by the state, something like this — BrTkCa
– BrTkCa, Commented Feb 20, 2018 at 15:11

Dyo · Accepted Answer · 2018-02-20 15:12:18Z

21

You're passing a function to the disabled prop, you have to execute this function to pass the boolean result of this function instead :

<input type="submit" value="Submit" disabled={this.isDisabled()}

answered Feb 20, 2018 at 15:12

Dyo

4,4641 gold badge18 silver badges30 bronze badges

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

1 Comment

Abhay Maurya Over a year ago

I am not at system right now but I guess it will work. So +1 and accepted. Thank you!

Pulkit Aggarwal · Accepted Answer · 2018-02-20 16:39:46Z

    <meta charset="UTF-8">
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/JSXTransformer.js"></script>
    <div id="app"></div>
    <script type="text/jsx;harmony=true">void function() { "use strict";

var App = React.createClass({
  getInitialState() {
    return {}
  },
  isDisabled(){
    return true;   // for disable button return true otherwise false
   // return false;
  },
  render() {
    return <div>
<input type="submit" value="Submit" disabled={this.isDisabled()}/>
    
    </div>
  }
})

React.render(<App/>, document.getElementById('app'))

}()</script>

Thank you but I have already accepted Dyo answer which was same. However thanks for yours too. +1.

Collectives™ on Stack Overflow

Disable/Enable submit button in React JS USING FUNCTION

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related