Function Base Popup Modal component... Need Help to disable Submit until User not selected any payment term.
//Modal Box Start
<Modal show={approveShow} onHide={() => { handleApproveClose() }}>
<Modal.Body>
<h3>Are You Sure You Want to Activate the User</h3>
<hr />
<div >
<label>Select Payment Term</label>
<Select options={PaymentTermList} onChange={onChangePaymentValue}></Select>
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={() => { handleApproveClose(); ChangeUserStatusBackend() }}>
Submit
</Button>
</Modal.Footer>
</Modal>
//Modal Box End
onChangePaymentValue:
function onChangePaymentValue(event) {
console.log(event.value);
SetPaymentTerm(event.value);
}
Assuming onChangePaymentValue is a function that updates state, set the initial state to zero. When you update the state you can change the status of the button. When it's zero disable it. If it's not zero, enable it.
const { useState } = React;
function Example() {
const [ paymentValue, setPaymentValue ] = useState(0);
function onChangePaymentValue(e) {
setPaymentValue(e.target.value);
}
function handleClick() {
console.log('Button clicked');
}
return (
<div>
<select onChange={onChangePaymentValue}>
<option selected>Choose a number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={handleClick} disabled={!paymentValue}>Submit</button>
</div>
);
};
// Render it
ReactDOM.render(
<Example />,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>if payment term's state is like this:
const[PaymentTerm,SetPaymentTerm] = useState(0);
so you need to change onChangePaymentValue to:
function onChangePaymentValue(event) {
SetPaymentTerm(event.target.value);
}
And also change button to:
<Button disabled={PaymentTerm == 0} variant="primary" onClick={() => { handleApproveClose(); ChangeUserStatusBackend() }}>
Submit
</Button>