React Native: Maximum update depth exceeded error - reactjs

Question

Am getting Maximum update depth exceeded error while entering values into the text field . This is my component .
If i remove the onChangeText event it wont throw error, so the issue is with the event .
These are the dependencies am currently using
react : 16.8.6,
react-dom :16.8.6,
react-native :https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz,
import { Form, View, Text, Button, Item, Input, Label, Toast, Spinner } from "native-base";
import React from "react";
import { validatePin } from "../services/validate";
export default class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = { userid: "", loading: "false" };
}
async login() {
if (this.state.userid.length == 0) {
Toast.show({
text: "Wrong UserID!",
buttonText: "Okay",
textStyle: { color: "yellow" }
});
} else {
if(this.state.loading === "false" ){
this.setState({ loading: "true" });
}
try {
let res = await validatePin(this.state.userid);
if (typeof res != "undefined") {
const { navigate } = this.props.navigation;
this.setState({ loading: "false" });
if (res.bypassMFA) {
navigate("Password", {
user_id: this.state.userid,
member_name: res.member_name
});
} else {
navigate("MFAComponent", {
userid: this.state.userid,
mfa_id: res.mfa_id,
mfa_q: res.mfa_q,
isValidUser: res.isValidUser
});
}
}
} catch (err) {
console.log("error in login:" + err);
}
}
}
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Form style={{ padding: 5, alignItems: "center" }}>
<Item floatingLabel>
<Label>Online ID</Label>
<Input
value={this.state.userid}
onChangeText={username => this.setState({ userid: username })}
/>
</Item>
{this.state.loading == "true" ? (
<View>
<Spinner size="large" color="#c137a2" />
</View>
) : null}
<Button primary onPress={this.login} style={{ alignSelf: "center", margin: 20 }}>
<Text> Next </Text>
</Button>
</Form>
</View>
);
}
}

Answer 1

First of all you didn't bind login function for onPress. Your onPress props should be like this :
onPress={() => this.login}
or in constructor bind method :
this.login.bind(this)