[FIXED] How do I update my React context after Axios response

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)