In ReactJS, I want to enable/disable a button dynamically. For that, I created a function to check the form field from state. But it's not working.
I tried the below code
render() {
const canSave = true; // Working
// Not working
const canSave = () => {
const { paramCode, paramDesc, paramValue } = this.state.row;
if (this.state.row && paramCode && paramDesc && paramValue) {
return true;
}
return false
}
/* For Create Dialog */
let createDialogFooter = <div className="ui-dialog-buttonpane p-clearfix">
<Button label="Save" disabled={canSave} />
</div>;
Console Error:-
index.js:1375 Warning: Invalid value for prop `disabled` on <button> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https : // fb.me/react-attribute-behavior
in button (created by Button)
in Button (at SearchPriceParameters.jsx:210)
in div (at SearchPriceParameters.jsx:209)
in div (created by Dialog)
in div (created by Dialog)
in Transition (created by CSSTransition)
in CSSTransition (created by Dialog)
in Dialog (at SearchPriceParameters.jsx:249)
in div (at SearchPriceParameters.jsx:233)
in SearchPriceParameters (created by Context.Consumer)
in Route (at App.js:34)
in Switch (at App.js:29)
in div (created by Container)
in Container (at App.js:28)
in div (at App.js:27)
in div (at App.js:16)
in App (at src/index.js:15)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:14)
Update:-
Thanks for the answers, now the below-fixed code works.
render() {
/** Enable / disable button */
const canSave = () => {
if (this.state.row) {
const { paramCode, paramDesc, paramValue } = this.state.row;
return (paramCode && paramDesc && paramValue);
}
return false;
}
/* For Create Dialog */
let createDialogFooter = <div className="ui-dialog-buttonpane p-clearfix">
<Button label="Save" icon="pi pi-check" onClick={this.save} className="p-button-warning" disabled={!canSave()} />
</div>;