# Add the Session to the State

**URL:** <https://discourse.sst.dev/t/add-the-session-to-the-state/136>\
**Category:** Chapter Comments\
**Created:** [May 9, 2018, 8:00pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136 "2018-05-09T20:00:42Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 8:00pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/21 "2018-05-09T20:00:48Z")

</div>

_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);

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 8:00pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/22 "2018-05-09T20:00:49Z")

</div>

_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} />`

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 8:00pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/23 "2018-05-09T20:00:49Z")

</div>

_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

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 8:00pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/24 "2018-05-09T20:00:49Z")

</div>

_From @jayair on Tue Apr 17 2018 22:45:50 GMT+0000 (UTC)_  
  
@alex-romanov @caronicolas Glad you figure it out.

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 8:00pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/25 "2018-05-09T20:00:49Z")

</div>

_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} "

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 8:00pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/26 "2018-05-09T20:00:50Z")

</div>

_From @jayair on Sun Apr 22 2018 00:50:31 GMT+0000 (UTC)_  
  
@d3lusional What’s the issue you are having?

---

<div class="post-metadata">

**Author:** ![chrisbnyc](https://avatars.discourse-cdn.com/v4/letter/c/a5b964/32.png) [@chrisbnyc](https://discourse.sst.dev/u/chrisbnyc)\
**Post date:** [May 27, 2018, 1:31am UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/27 "2018-05-27T01:31:40Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![chrisbnyc](https://avatars.discourse-cdn.com/v4/letter/c/a5b964/32.png) [@chrisbnyc](https://discourse.sst.dev/u/chrisbnyc)\
**Post date:** [May 27, 2018, 1:36am UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/28 "2018-05-27T01:36:08Z")

</div>

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
```

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [May 27, 2018, 10:20pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/29 "2018-05-27T22:20:01Z")

</div>

Yeah the completed version is the master branch of this repo - [https://github.com/AnomalyInnovations/serverless-stack-demo-client](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](https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/give-feedback-while-logging-in)

---

<div class="post-metadata">

**Author:** ![KedarPandhare](https://avatars.discourse-cdn.com/v4/letter/k/c68b51/32.png) [@KedarPandhare](https://discourse.sst.dev/u/KedarPandhare)\
**Post date:** [June 14, 2018, 9:41pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/30 "2018-06-14T21:41:10Z")

</div>

I am getting the following error.

 ![41%20PM](https://canada1.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/bb2be525606826ee1723430eaaeffc2a5a9b115d.png). I am new to react so not sure what is causing this issue. Can anyone help?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [June 14, 2018, 10:48pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/31 "2018-06-14T22:48:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pobch](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/pobch/32/312_2.png) [@pobch](https://discourse.sst.dev/u/pobch)\
**Post date:** [October 5, 2018, 12:12am UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/33 "2018-10-05T00:12:46Z")

</div>

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` ?

```auto
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>;

```

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [October 6, 2018, 2:09am UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/34 "2018-10-06T02:09:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![scooper](https://avatars.discourse-cdn.com/v4/letter/s/8c91f0/32.png) [@scooper](https://discourse.sst.dev/u/scooper)\
**Post date:** [April 6, 2019, 2:44am UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/35 "2019-04-06T02:44:10Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [April 6, 2019, 10:48pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/36 "2019-04-06T22:48:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![scooper](https://avatars.discourse-cdn.com/v4/letter/s/8c91f0/32.png) [@scooper](https://discourse.sst.dev/u/scooper)\
**Post date:** [April 7, 2019, 11:08pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/37 "2019-04-07T23:08:23Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![amorimjr](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@amorimjr](https://discourse.sst.dev/u/amorimjr)\
**Post date:** [April 11, 2019, 11:42pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/38 "2019-04-11T23:42:59Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [April 11, 2019, 11:44pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/39 "2019-04-11T23:44:00Z")

</div>

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

> **[AnomalyInnovations/serverless-stack-demo-client](https://github.com/AnomalyInnovations/serverless-stack-demo-client)**
>
> Source for the demo app client in Serverless-Stack.com - AnomalyInnovations/serverless-stack-demo-client

---

<div class="post-metadata">

**Author:** ![Cryoware](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/cryoware/32/524_2.png) [@Cryoware](https://discourse.sst.dev/u/Cryoware)\
**Post date:** [May 14, 2019, 6:53pm UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/40 "2019-05-14T18:53:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [May 27, 2019, 12:15am UTC](https://discourse.sst.dev/t/add-the-session-to-the-state/136/41 "2019-05-27T00:15:41Z")

</div>

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

[Previous page](https://discourse.sst.dev/t/add-the-session-to-the-state/136.md?page=1)

[Next page](https://discourse.sst.dev/t/add-the-session-to-the-state/136.md?page=3)