Issue
Brief explanation
So What I want to achieve is the following: after confirmation that the user e-mail address and password are correct, a login state must update from false to true. That loginstate however is set up in my App.js and the login confirmation in my Login.js.
Code
In my App.js, I have the following code:
<UserProvider value={{
loggedIn: this.state.loggedIn,
actions: {
logIn: event => {
this.setState({ loggedIn: true })
}
}
}}>
<Route path='/' component={Login} />
</UserProvider>
In my Login.js, I have a arrowfunction set up after the user clicks on the login button.
requestAuth = () => {
axios({
method: 'post',
url: process.env.REACT_APP_API_AUTH,
data: {
username: 'test',
password: 'test'
}
})
.then(
(response) => {
console.log(response)
this.setState({
feedback: "Alright, welcome back! I'm gonna log you in!"
})
}
)
.catch(
(error) => {
console.log(error)
this.setState({
feedback: "Sorry, I think your e-mail or password is incorrect. Wanna try again?"
})
}
);
}
render () {
return (
<UserConsumer>
{({ actions }) => {
return(
<div onClick={this.requestAuth}>
</div>
)
}}
</UserConsumer>
)
}
Question
However, I fail to understand how to update my 'actions.Login' eventset up in the App.js after my login request is succesful.
Solution
requestAuth
needs access to the logIn
method: onClick={() => this.requestAuth(actions)}
And then requestAuth
itself can look like this:
requestAuth = (actions) => {
axios(/* ... */)
.then(
(response) => {
console.log(response)
actions.logIn() // there you go
this.setState({
feedback: "Alright, welcome back! I'm gonna log you in!"
})
}
)
// ...
}
Answered By - xehpuk Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.