what I want is to make the TextPanel disabled if payStub
has a value, and not be disabled if payStub
does not have a value,
In my react code, I have the following:
const [payStub, setPayStub] = useState(() => {
if (isNewPayStub) {
return get(user, 'stub', '');
}
return stubEdit.value?.name || '';
});
const stubIsValid = Boolean(trim(payStub));
and in the react side I have the following:
return (
<Panel
onClose={onClose}
onSave={handleSave}
addNewText={isNewPayStub ? 'Add New PayStub' : ''}
>
....
<TextPanel
handleChange={setPayStub}
isValid={stubIsValid}
isRequired
label="Stub"
placeholder="Enter STUB"
value={payStub}
/>
The TextPanel receives a property of disabled
, and when I add a property as disabled: {stubIsValid}
, when the user enters the first character, the condition will be met and it makes the TextPanel disabled which is not what I want (user should be able to fill enter the payStub) .
How do I fix this situation?