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>
You pass name into the value prop of InputField as you can see from this snippet of your provided code.
<InputField
value={name}
onChangeText={lastNameHandler}
error={!validName}
/>
But name is not a state in your component, but lastName which you are using to check the conditions as well as the state you are setting in onChangeText, thus you need to assign the state that you want the value prop of your InputField to store the text in to be a state in your component.
To say it in other words: you're InputField never stores the actual value in the correct state.
You can fix this as follows.
<InputField
value={lastName}
onChangeText={lastNameHandler}
error={!validName}
/>
For providing an initial value to your InputField, you need to pass them as a prop to your component as follows.
const MyForm = ({initalName}) => {
const [lastName, setLastName] = useState(initialName);
}
In the parent container you pass the intial value into the component. This could look as follows.
const MainScreen = () => }
return (
<MyForm initialName={"Max"} />
)
}
If your form does handle this on its own using some API call, then you could do this initially in a useEffect on first render.
const MyForm = () => {
const [lastName, setLastName] = useState('');
useEffect(() => {
someApiCallForLastName().then(response => setLastName(response.lastName))
}, [setLastName])
}