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.

Answer 1

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