New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the Session to the State #39

Closed
jayair opened this Issue Apr 10, 2017 · 26 comments

Comments

Projects
None yet
@jayair
Member

jayair commented Apr 10, 2017

@jayair jayair added the Discussion label Apr 10, 2017

@jayair jayair changed the title from Comments: Add the User Token to the State to Add the Session to the State Aug 30, 2017

@KelpDuNord

This comment has been minimized.

Show comment
Hide comment
@KelpDuNord

KelpDuNord Nov 1, 2017

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.

KelpDuNord commented Nov 1, 2017

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.

@jayair

This comment has been minimized.

Show comment
Hide comment
@jayair

jayair Nov 1, 2017

Member

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

Member

jayair commented Nov 1, 2017

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

@x11joe

This comment has been minimized.

Show comment
Hide comment
@x11joe

x11joe Nov 8, 2017

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

x11joe commented Nov 8, 2017

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

@jayair

This comment has been minimized.

Show comment
Hide comment
@jayair

jayair Nov 9, 2017

Member

@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

Member

jayair commented Nov 9, 2017

@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

@lucasgonze

This comment has been minimized.

Show comment
Hide comment
@lucasgonze

lucasgonze Nov 24, 2017

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.

lucasgonze commented Nov 24, 2017

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.

@TheDagger

This comment has been minimized.

Show comment
Hide comment
@TheDagger

TheDagger Nov 24, 2017

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

TheDagger commented Nov 24, 2017

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

@jayair

This comment has been minimized.

Show comment
Hide comment
@jayair

jayair Nov 26, 2017

Member

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

Member

jayair commented Nov 26, 2017

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

@jayair

This comment has been minimized.

Show comment
Hide comment
@jayair

jayair Nov 26, 2017

Member

Just added a better explanation - 6be7f67

Member

jayair commented Nov 26, 2017

Just added a better explanation - 6be7f67

@x11joe

This comment has been minimized.

Show comment
Hide comment
@x11joe

x11joe Dec 10, 2017

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)

x11joe commented Dec 10, 2017

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)

@jayair

This comment has been minimized.

Show comment
Hide comment
@jayair

jayair Dec 11, 2017

Member

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

Member

jayair commented Dec 11, 2017

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

@teejK

This comment has been minimized.

Show comment
Hide comment
@teejK

teejK Jan 23, 2018

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?

teejK commented Jan 23, 2018

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?

@jayair

This comment has been minimized.

Show comment
Hide comment
@kevinlbatchelor

This comment has been minimized.

Show comment
Hide comment
@kevinlbatchelor

kevinlbatchelor Jan 25, 2018

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
                );
            }}/>
        );
    }
 };

kevinlbatchelor commented Jan 25, 2018

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
                );
            }}/>
        );
    }
 };
@jayair

This comment has been minimized.

Show comment
Hide comment
@jayair

jayair Jan 25, 2018

Member

@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 - 6be7f67

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

Member

jayair commented Jan 25, 2018

@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 - 6be7f67

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

@twalkerjr22

This comment has been minimized.

Show comment
Hide comment
@twalkerjr22

twalkerjr22 Apr 8, 2018

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)

twalkerjr22 commented Apr 8, 2018

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)

@jayair

This comment has been minimized.

Show comment
Hide comment
@jayair

jayair Apr 9, 2018

Member

@twalkerjr22 Where exactly are you seeing this?

Member

jayair commented Apr 9, 2018

@twalkerjr22 Where exactly are you seeing this?

@caronicolas

This comment has been minimized.

Show comment
Hide comment
@caronicolas

caronicolas Apr 16, 2018

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

caronicolas commented Apr 16, 2018

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

@jayair

This comment has been minimized.

Show comment
Hide comment
@jayair

jayair Apr 16, 2018

Member

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

Member

jayair commented Apr 16, 2018

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

@alex-romanov

This comment has been minimized.

Show comment
Hide comment
@alex-romanov

alex-romanov Apr 16, 2018

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

alex-romanov commented Apr 16, 2018

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

@caronicolas

This comment has been minimized.

Show comment
Hide comment
@caronicolas

caronicolas Apr 16, 2018

It's just after this step :

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

caronicolas commented Apr 16, 2018

It's just after this step :

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

@alex-romanov

This comment has been minimized.

Show comment
Hide comment
@alex-romanov

alex-romanov Apr 16, 2018

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

alex-romanov commented Apr 16, 2018

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

@caronicolas

This comment has been minimized.

Show comment
Hide comment
@caronicolas

caronicolas Apr 16, 2018

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

caronicolas commented Apr 16, 2018

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

@jayair

This comment has been minimized.

Show comment
Hide comment
@jayair

jayair Apr 17, 2018

Member

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

Member

jayair commented Apr 17, 2018

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

@d3lusional

This comment has been minimized.

Show comment
Hide comment
@d3lusional

d3lusional Apr 20, 2018

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

d3lusional commented Apr 20, 2018

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

@jayair

This comment has been minimized.

Show comment
Hide comment
@jayair

jayair Apr 22, 2018

Member

@d3lusional What's the issue you are having?

Member

jayair commented Apr 22, 2018

@d3lusional What's the issue you are having?

@jayair jayair closed this May 9, 2018

@jayair jayair reopened this May 9, 2018

@jayair

This comment has been minimized.

Show comment
Hide comment
Member

jayair commented May 9, 2018

@jayair jayair closed this May 9, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment