Can the modal be made aware of the calling component state #66
Description
I have a custom ui modal with 2 buttons yes/no. But I only want to enable the "yes" button when the user types in a word into an input box in the modal. I have a state variable that switches to true when the word is typed. But the button is not enabling. And I printed out the variable onto the modal as well and that is not changing.
Here is my modal code:
confirmAlert({
customUI: ({ onClose }) => {
return (
<div className={'custom-ui-dialog'}>
<h1>Confirm Complete Shift</h1>
<div className={'body'}>
<h3>
Are you sure you want to complete the shift?
<br />
Type COMPLETE below to confirm.
</h3>
<input
type={'text'}
className={'form-control'}
onChange={checkInput}
/>
<br />
<div className={'buttons'}>
<button onClick={onClose}>No</button>
<button
onClick={switchShifts}
disabled={!completedTyped}
>
Yes
</button>
</div>
{`completedTyped: ${completedTyped}`}
</div>
</div>
);
},
closeOnEscape: false,
closeOnClickOutside: false,
});