react lifting state up after login verified - reactjs

Question

I'd like to create component - - so that only authorised users can access it. the idea is that after receiving response 200 from backend in my Login component (which is a child component) I would somehow use authed:true as props in parent component. I understand this instructions https://reactjs.org/docs/lifting-state-up.html and also used similar procedure on other components. However, in this case, I am getting the error:
TypeError: this.props.authAfter200 is not a function
at Login.handleSetAuthAfterVerified200 (AuthExample.js:325)
at AuthExample.js:350
at <anonymous>
The problem is I am not able to define function as a prop in my child component.
This is the function in my parent component that should get called as a prop.
setAuthToTrue=() => {
this.setState({authed:true})
}
but I never get to here.
This is how I have defined my Route router in AuthExample(parent) component - using react-router-with-props for that:
<PrivateRoute
exact
path="/private"
redirectTo="/login"
component={DailyNewsForUOnly}
text="This is a private route"
authAfter200={this.setAuthToTrue}
authed={this.state.authed}
/>
this is the part in my child component - Login.js where I should be able to define function on my props to pass to the parent component - but I just cannot:
handleSetAuthAfterVerified200() {
//this.setState({authed:true})
this.props.authAfter200()
}
verifyToken() {
let request = {
method: "post",
url: "https://xxxxxx/xxxx/verify/",
data: {
user: this.state.email,
token: this.state.token
},
withCredentials: true
};
console.log("request to verify");
console.log(request);
this.setState({ requestInMotion: true });
axios(request)
.then(response => {
console.log("response from verify", response);
if (response.status === 200) {
this.handleSetAuthAfterVerified200()
this.setStateAfterVerified200()
}
})
.catch(error => {
console.log(error);
this.setState({ requestInMotion: false, validationState: "error" });
console.log(
"this.state in the error part of response in verify",
this.state
);
});
}

Answer 1

i would suggest u to try to add debuggers in
react-router-with-props/PrivateRoute.js and in
react-router-with-props/renderMergedProps.js
and check if your props are actually being passed on properly.
he is doing very simple job of either allowing react to render your component or to redirect to url provided as prop.
I would suggest you rather use HigherOrderComponents or OnEnter route hook to handle these situations than a third party component.