Add the Session to the State

Chapter Comments
1

From @jayair on Mon Apr 10 2017 01:03:41 GMT+0000 (UTC)

Link to chapter - https://serverless-stack.com/chapters/add-the-session-to-the-state.html

Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/39

2

From @KelpDuNord on Wed Nov 01 2017 15:43:39 GMT+0000 (UTC)

When running a Jest test against App.js, I get ā€œUnexpected tokenā€ at the = after userHasAuthenticated in

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

The syntax seems correct according to the React docs. Anyone have a clue? Thanks.

3

From @jayair on Wed Nov 01 2017 17:38:06 GMT+0000 (UTC)

@KelpDuNord Yeah the syntax looks fine. Iā€™m not sure why itā€™s complaining.

4

From @x11joe on Wed Nov 08 2017 09:39:10 GMT+0000 (UTC)

<RouteNavItem key={1} href="/signup"> I noticed you added key={1} but the section does not explain why (or even if the reason why is because it will be used later). Curious what this is needed for?

5

From @jayair on Thu Nov 09 2017 18:23:36 GMT+0000 (UTC)

@x11joe React needs keys when you are creating a list of components. You can read more about it here - https://reactjs.org/docs/lists-and-keys.html

6

From @lucasgonze on Fri Nov 24 2017 23:30:57 GMT+0000 (UTC)

I find this bit of code particularly baffling:

export default ({ component: C, props: cProps, ...rest }) => <Route {...rest} render={props => <C {...props} {...cProps} />} />;

The combo of ES6 with React idioms in the context of shorthand code makes it inscrutable.

1 Like
7

From @TheDagger on Fri Nov 24 2017 23:33:48 GMT+0000 (UTC)

@lucasgonze yeah I agree I had to spend like an hour wrapping my head around that the first time lol

8

From @jayair on Sun Nov 26 2017 18:27:34 GMT+0000 (UTC)

@lucasgonze @TheDagger Yeah I can see that. Let me add more of an explanation to that section.

9

From @jayair on Sun Nov 26 2017 19:04:46 GMT+0000 (UTC)

Just added a better explanation - https://github.com/AnomalyInnovations/serverless-stack-com/commit/6be7f67ae12dd4619c842c8b0a86a282ce628fd2

10

From @x11joe on Sun Dec 10 2017 22:20:45 GMT+0000 (UTC)

I had one more question on this section, the code <Route {...rest} render={props => <C {...props} {...cProps} />} />; I get most of this now, but the part I donā€™t get in particular is {...props} {...cProps} />}. My understanding is this creates the properties and the values that go with the properties. This makes sense except for one thing. My understanding of attributes is it has to be formatted like this, <a href="hey" custom="something">test</a>. The = in particular here is where I am confused because I noticed that is not in the example but somehow it still works? How is this working with the equal omitted? The translation in my head looks like this right now <C isAuthenticated true /> In the case of App passing that in as a property, does it not need equal in this case? Shouldnā€™t it be <C isAuthenticated = true /> ? (I come html HTML/CSS/PHP, so this might be a newbie javascript question)

11

From @jayair on Mon Dec 11 2017 12:09:55 GMT+0000 (UTC)

@x11joe I agree this part is pretty confusing. And JSX has not been my favorite feature of React but it ends up being fairly convenient in practice.

In this specific case, your idea is right. The spread operator {...props} does it for you. Here is more info on it - https://reactjs.org/docs/jsx-in-depth.html#spread-attributes. The entire chapter is worth a read if you want to get a better understanding of JSX.

12

From @teejK on Tue Jan 23 2018 16:22:41 GMT+0000 (UTC)

JS noob here: originally read {component: C, props: cProps, ...rest} as assigning values C and cProps to properties component and props, but C and cProps are being assigned as aliases for the properties component and props.

export default ({ component: C, props: cProps, ...rest })

Finally, we take component (set as C) and props (set as cProps)

Could you name this behaviour so I can look up documentation for it or link to documentation for this behaviour so I can better understand how/when to use it?

13

From @jayair on Tue Jan 23 2018 17:16:24 GMT+0000 (UTC)

@teejK Yeah itā€™s called Destructuring https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

14

From @kevinlbatchelor on Thu Jan 25 2018 06:49:32 GMT+0000 (UTC)

Writing unreadable code like this is ridiculous, we write code for people to read not computers. Iā€™ve been coding for 12 years, writing react since its release, when I saw this I laughed, then came here to vent. I run in to a lot of devs who do this to look smart under the guise that it is efficient.

export default ({ component: C, props: cProps, ā€¦rest }) => <Route {ā€¦rest} render={props => <C {ā€¦props} {ā€¦cProps} />} />;

The spread operator is still tricky, but super handy. here is the same code written more verbosely, and perhaps easier to read, which IMO should be apart of any good tutorial

<AppliedRoute path="/login" exact component={Login} props={childProps}/>

 
import React, {Component} from 'react';
import {Route} from 'react-router-dom';

export default class AppliedRoute extends Component {
    render() {
        const Comp = this.props.component;
        const childProps = this.props.props;
        const exact = this.props.exact;
        const path = this.props.path;

        return (
            <Route path={path} exact={exact} render={(routerProps) => {
                return (
                    <Comp {...routerProps} {...childProps}/>
                    //spread operator is adding all properties of routerProps & childProps to Comp
                   // i.e. <Comp match={match} location={location} whatever={whatever}>
                   //this is useful because we cannot predict what gets passed in to childProps, and we probably dont know what is in routerProps because it is a library
                );
            }}/>
        );
    }
 };
15

From @jayair on Thu Jan 25 2018 20:44:25 GMT+0000 (UTC)

@kevinlbatchelor While what you are saying is true; I get plenty of comments from other folks who look at a simplified version and tell us that we should use the ā€œmodern versionā€ because itā€™s more ā€œefficientā€.

That said, I do think code like this (as it is in a lot of other languages) will become more common as it gets adopted. There are going to be some growing pains for the JS world. In fact, this line is taken from the React Router docs which I assume some of our readers will try and go over.

This is why I decided to leave it this way but added a long explanation on how some of destructuring parts work - https://github.com/AnomalyInnovations/serverless-stack-com/commit/6be7f67ae12dd4619c842c8b0a86a282ce628fd2

Thanks for your comment. Itā€™ll help anybody else that is looking for a simpler way to write this. And I understand your frustration.

16

From @twalkerjr22 on Sun Apr 08 2018 02:38:23 GMT+0000 (UTC)

Does anyone know how to fix this error? TypeError: _this.props.userHasAuthenticated is not a function. (In ā€˜_this.props.userHasAuthenticated(true)ā€™, ā€˜_this.props.userHasAuthenticatedā€™ is undefined)

17

From @jayair on Mon Apr 09 2018 17:27:01 GMT+0000 (UTC)

@twalkerjr22 Where exactly are you seeing this?

18

From @caronicolas on Mon Apr 16 2018 12:16:10 GMT+0000 (UTC)

I have the same error as @twalkerjr22 . The error appear in a popup when I try to log in.
I have read again the complete part two times but I donā€™t find what Iā€™m doing wrongā€¦

19

From @jayair on Mon Apr 16 2018 18:04:31 GMT+0000 (UTC)

@caronicolas Can you tell me exactly after which step in the tutorial do you start seeing this error?

20

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

@jayair, I have the same error as @carnicolas, the error is comes from within the try statement in the handleSubmit function in Login.js