Add the Session to the State

Chapter Comments
21

From @caronicolas on Mon Apr 16 2018 19:07:09 GMT+0000 (UTC)

It’s just after this step :

Replace the alert(‘Logged in’); line with the following in src/containers/Login.js.
this.props.userHasAuthenticated(true);

22

From @alex-romanov on Mon Apr 16 2018 19:18:34 GMT+0000 (UTC)

@caronicolas found it, I was missing a step: in App.js replace <Routes /> with <Routes childProps={childProps} />

23

From @caronicolas on Mon Apr 16 2018 19:39:52 GMT+0000 (UTC)

Ok, thank you @alex-romanov, I insert a space between childProps and ‘=’ sign… My bad… Sorry @jayair

24

From @jayair on Tue Apr 17 2018 22:45:50 GMT+0000 (UTC)

@alex-romanov @caronicolas Glad you figure it out.

25

From @d3lusional on Fri Apr 20 2018 19:39:25 GMT+0000 (UTC)

I am having the same issue with “this.props.userHasAuthenticated” is not a function. Unfortunately my problem wasn’t the "Routes childProps={childProps} "

26

From @jayair on Sun Apr 22 2018 00:50:31 GMT+0000 (UTC)

@d3lusional What’s the issue you are having?

27

FWIW I am getting the same error with this.props.userHasAuthenticated… also verified my routes are correct so I don’t think I missed anything on the page. Is there a ‘complete’ version of the .js in a repo I can compare against for typos?

28

I am not up to speed on React but is it saying that the following is not a function? Have I messed up the signature?

... snip begins 

constructor(props) {
   super(props);

  this.state = {
    isAuthenticated: false
  };
}

  userHasAuthenticated = authenticated => {
    this.setState({ isAuthenticated: authenticated });
  }

  handleLogout = event => {
    this.userHasAuthenticated(false);
  }

 render() {

... snip ends
29

Yeah the completed version is the master branch of this repo - https://github.com/AnomalyInnovations/serverless-stack-demo-client.

Though based on the chapter that you are in, the best spot to compare would be this chapter/branch - https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/give-feedback-while-logging-in

30

I am getting the following error.

41%20PM
Screen Shot 2018-06-14 at 5.39.41 PM.png2358×954 206 KB
. I am new to react so not sure what is causing this issue. Can anyone help?

31

Just make sure you’ve imported Router and App correctly in the file.

33

A react beginner’s question here:

Why do we have to create src/components/AppliedRoute.js ?

Can we just use the following code in src/Routes.js ?

export default ({ childProps }) =>
  <Switch>
    <Route path="/" exact render={props => <Home {...props} {...childProps} />} />
    <Route path="/login" exact render={props => <Login {...props} {...childProps} />} />
    <Route component={NotFound} />
  </Switch>;
1 Like
34

Yeah you can. The AppliedRoute is doing pretty much that. It’s just a convenience component.

1 Like
35

@jayair

Hi,
i am having an error similar to others where childProps is not being passed correctly to login.js, hence the error “_this.props.userHasAuthenticated is not a function”.

I have checked my routes, my declaration of childProps etc… Any ideas?

Thanks for your time,
Shaun.

36

Hmmm the way this is getting passed in is through the routes. Make sure you are doing the AppliedRoute.js step in this chapter. That is how we are passing those props in.

37

Hi @jayair, yes i have done the applied routes step. Seems to still not get passed, ive also passed it through the “< Routes childProps = {childProps} />” step. Any Ideas? would a .jsx extension cause any problems like this?

38

TypeError: Cannot read property ‘props’ of undefined
at Login.js:34

line 34: this.props.userHasAuthenticated(true);

39

No that shouldn’t cause it. At this point I would just compare your code to the one in the repo.

40

For the AppliedRoute component the cProps and props should be swapped, because cProps is overwriting the match key.
<Route {…rest} render={props => <C {…cProps} {…props} />}/>;

This was causing an issue where no matter what route you were on, the match would always show the root “/” url. Swapping them fixes this.

41

Hmm what do you mean by the root url? Can you show me what I need to replicate and test the issue?