Can't call function? - react-native

Question

This is a simple registration page with username, email, phone num, password and repeat password. The problem lies in repeat password input. This input is supposed to trigger verifyRePassword on text change (just like every other input, and their respective functions). While other inputs have no problem triggering their functions, Repeat Password seems to not trigger its function (verifyRePassword) on text change.
I have tried switching each input with another function, and other inputs seem to trigger the function verifyRePassword just fine.
//FUNCTIONS
verifyPassword = (text) => {
this.setState({password:text})
console.log("verifyPassword Called");
let reg = /\w{6,}/ ;
if(reg.test(text) === false)
{
this.setState({errMsgPassword: "Password must be longer than 6 characters"})
this.setState({password:text})
}
else {
this.setState({errMsgPassword: ""})
this.setState({password:text})
}
}
verifyRePassword = (text) => {
this.setState({repassword: text})
console.log("verifyRePassword Called !!!");
const passStr = toString(this.state.password)
const repassStr = toString(this.state.repassword)
if (passStr === repassStr) {
this.setState({
errMsgRePassword: ""
})
}
else{
this.setState({
errMsgRePassword: "Password must match."
})
}
}
//INPUT
<Text style={stsh.textError}>{this.state.errMsgPhonenum}</Text>
<Text style={stsh.text1}>Password</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyPassword}
secureTextEntry={true}
/>
<Text style={stsh.textError}>Error {this.state.errMsgPassword}</Text>
<Text style={stsh.text1}>Repeat Password</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyRePassword.bind(this)}
secureTextEntry={true}
/>
<Text style={stsh.textError}>Error {this.state.errMsgRePassword}</Text>
Since the two are structured similarly, they both should work just fine. Password works, but not Repeat Password.
*edit: some more bits from the code
//CONSTRUCTOR
constructor(){
super()
this.state = {
username: "",
emailadd: "",
phonenum: "",
password: "",
repassword: ""
}
this.verifyUsername = this.verifyUsername.bind(this)
this.verifyEmailadd = this.verifyEmailadd.bind(this)
this.verifyPhonenum = this.verifyPhonenum.bind(this)
this.verifyPassword = this.verifyPassword.bind(this)
}
//COMPLETE FUNCTIONS
verifyUsername = (text) => {
this.setState({username:text})
console.log(text);
let reg = /\w{5,30}/ ;
if(reg.test(text) === false)
{
this.setState({errMsgUsername: "Username must contain 5 to 30 characters"})
this.setState({username:text})
return false;
}
else {
this.setState({errMsgUsername: ""})
this.setState({username:text})
}
}
verifyEmailadd = (text) => {
this.setState({emailadd:text})
console.log(text);
let reg = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
if(reg.test(text) === false)
{
this.setState({errMsgEmailadd: "Enter a valid email address"})
this.setState({emailadd:text})
return false;
}
else {
this.setState({emailadd:text})
this.setState({errMsgEmailadd: ""})
}
}
verifyPhonenum = (text) => {
this.setState({phonenum:text})
console.log(text);
let reg = /\d{10,11}/ ;
if(reg.test(text) === false)
{
this.setState({errMsgPhonenum: "Phone number must be 10 to 11 characters long consisting only of digits"})
this.setState({phonenum:text})
return false;
}
else {
this.setState({errMsgPhonenum: ""})
this.setState({phonenum:text})
}
}
verifyPassword = (text) => {
this.setState({password:text})
console.log("verifyPassword Called");
let reg = /\w{6,}/ ;
if(reg.test(text) === false)
{
this.setState({errMsgPassword: "Password must be longer than 6 characters"})
this.setState({password:text})
}
else {
this.setState({errMsgPassword: ""})
this.setState({password:text})
}
}
verifyRePassword = (text) => {
this.setState({repassword: text})
console.log("verifyRePassword Called !!!");
const passStr = toString(this.state.password)
const repassStr = toString(this.state.repassword)
if (passStr === repassStr) {
this.setState({
errMsgRePassword: ""
})
}
else{
this.setState({
errMsgRePassword: "Password must match."
})
}
}
//COMPLETE RENDER
render() {
return (
<View style={{flex: 1}}>
<SafeAreaView>
<ScrollView style={stsh.container}>
<Text style={{fontSize:40, fontWeight: "bold", borderBottomWidth: 2, color: "#515151", borderColor: "#515151"}}>Sign Up</Text>
<Text style={{color: "#515151",fontSize: 20,fontWeight: "bold",paddingTop: 60}}>Username</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyUsername}
maxLength={30}
t
/>
<Text style={stsh.textError}>{this.state.errMsgUsername}</Text>
<Text style={stsh.text1}>Email</Text>
<TextInput style={stsh.text2}
value={this.state.email}
onChangeText={this.verifyEmailadd.bind(this)}
/>
<Text style={stsh.textError}>{this.state.errMsgEmailadd}</Text>
<Text style={stsh.text1}>Phone number</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyPhonenum}
maxLength={11}
/>
<Text style={stsh.textError}>{this.state.errMsgPhonenum}</Text>
<Text style={stsh.text1}>Password</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyPassword}
secureTextEntry={true}
/>
<Text style={stsh.textError}>Error {this.state.errMsgPassword}</Text>
<Text style={stsh.text1}>Repeat Password</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyRePassword}
secureTextEntry={true}
/>
<Text style={stsh.textError}>Error {this.state.errMsgRePassword}</Text>
<Text style={{paddingBottom: 50}}></Text>
<Button color='#515151'
onPress={this.submitRegister}
type="outline"
title="Sign Up"
titleStyle={{paddingVertical: 10, fontSize: 30, fontWeight: "bold", color: "#515151"}}
buttonStyle={{borderColor:"#515151", borderWidth: 10, borderRadius: 20}}
/>
<Text style={{paddingBottom: 100}}></Text>
</ScrollView>
</SafeAreaView>
</View>
);
}
}

Answer 1

I've rewrite your verifyRePassword function (I removed the "toString()" as I don't see why it's needed there), try the code below:
verifyRePassword = (text) => {
console.log("verifyRePassword Called !!!", text);
this.setState(()=>{
return {repassword: text};
}, ()=>{
const {password, repassword} = this.state;
this.setState({
errMsgRePassword: password === repassword? "" : "Password must match.",
});
});
}
The issue with comparing the values like you did is that; there is actually a time gap before setState change the value of repassword. Which means; when the line
const repassStr = toString(this.state.repassword)
runs, it actually gets the previous value of "repassword". For this reason, you should use the callback for setState as shown above.