To clarify this question. I have two inputs fields, sometimes one of the input field is already pre-populated based on if its user or guest. If guest both are empty, enter text on both input the button will be enabled. However if user, one of the input field is already populated with its said name, but the button is still disabled when I entered some text on the other field. It seems like the pre-populated input field is still consider empty even if there's already value inside of it. How do you fix this situation?
const [confirmNumber, setConfirmNumber] = useState(''); const [lastName, setLastName] = useState(''); const [validNumber, setValidNumber] = useState(true); const [validName, setValidName] = useState(true); const [isButtonDisabled, setIsButtonDisabled] = useState(true); const confirmNumberHandler = (val: string) => { setConfirmNumber(val); setValidNumber(true); }; const lastNameHandler = (val: string) => { setLastName(val); setValidName(true); };
const buttonDisable = () => { if (confirmNumber !== ''&& lastName !== '') { return false; //the bottom if statement doesn't seem to work :( any other solutions? } else if (confirmNumber !== ''&& lastName === name) { return false; } return true; };
<InputField autoFocus onChangeText={confirmNumberHandler} error={!validNumber} /></View><View style={styles.viewMargin}><InputField// I haven't created any condition for this value this is a just a hard coded string. to test if there's value already there. value={name} onChangeText={lastNameHandler} error={!validName} /></View><View style={styles.buttonStyle}><PrimaryButton showLoading={loading} disabled={buttonDisable()} onPress={() => { lookUpHandler(); }}></PrimaryButton>