Within my application, I have implemented a login feature in the navbar component. However, I am encountering an issue with updating a variable in the main component upon successful login. Although I have successfully managed to set up the login functionality in the navbar, the challenge arises when attempting to pass the updated variable back to the parent component.
<LoginBar AuthRes={this.state.AuthResults} IsLoggedIn={this.state.isLoggedIn}/>
This snippet of code demonstrates how the 'IsLoggedIn' variable is being passed into the navbar component. Within the navbar itself, the following logic is applied:
LoginAuth = (Res) => {
if (Res.username === this.state.Username && Res.password === this.state.Password) {
this.setState({
IsLoggedIn: true,
}, function(){
});
this.hideModal();
} else {
console.log("Gets to login auth and false");
}
}
CheckLoginAuth() {
console.log("gets to check login auth");
console.log(this.state.AuthRes);
console.log("Username=" + this.state.Username);
console.log("Password=" + this.state.Password);
var self = this;
this.props.AuthRes.map(function (Res) {
console.log("ID=" + Res.id);
console.log("Username=" + Res.username);
console.log("Password=" + Res.password);
self.LoginAuth(Res);
});
}
Upon clicking the login button, the user is prompted to enter their credentials. The system then utilizes the .map method to cycle through all stored login details. Subsequently, the information is passed to LoginAuth where validation occurs against the stored data. If a match is found, the 'IsLoggedIn' status is updated to true. The question now revolves around how to relay this change back to the parent component for further actions.
In addition, there is a concern regarding breaking the loop once a correct entry has been identified. Presently, an alert message indicating "Incorrect username or password" repeats three times if none of the provided credentials match.
Your input and assistance are greatly appreciated. Thank you!
edit:
Upon experimenting, attempts to access 'this.props.IsLoggedIn(true)' or 'this.props.isLoggedIn(true)' result in an error message stating: TypeError: Cannot read property 'props' of undefined. This implies that 'isLoggedIn' and 'IsLoggedIn' are currently considered as undefined entities.
state = {
AuthRes: this.props.AuthRes,
isOpen: false,
Username: '',
Password: '',
searchResults: [],
testMode: true,
isLoggedIn: this.props.IsLoggedIn,
Auth: '',
}