Add the Session to the State

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

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

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

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.

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

Has anyone solved this?, i’m stuck at the same point and i’ve checked my routes and my spelling etc etc. I compared against the code in the repo and it looks to be correct.

Can’t see where i’ve gone wrong but still getting “this.props.userHasAuthenticated is not a function” error

Any luck anyone?

Hmm can you post the line number or other error details?

Any ideas on why my session is saved between refreshing the page? I double checked the code and am not getting any errors in the dev console so not sure what I missed.

Solved My Own issue.

1 Like

Hello everyone,

i read about an error that i get several times in this comments.

it appears in the login.js when i call this.props.userHasAutheticated(true);
If i do that, the browsers console shows: TypeError: Cannot read property ‘props’ of undefined

If i make console.log(this.props.userHasAutheticated) in the constructor, it shows the source code of the function from app.js.

So i dont know what to do. I hope somebody can help me with that

Hello,

i fixed it, the problem was, that i am using axios instead of aws.
and axios is using a .then function in wich you cannot use this.
So i made this in front of the axios call: var self = this;
then i was able to call the prop, with self.props.userhasauthenticated

maybe it helps somebody else:)

1 Like

@jayair > The “Add the Session to the State” code in Appliedroute.js needs some love… 3rd time around and still cant get this to work.

./src/components/AppliedRoute.js
TypeError: Cannot read property ‘forEach’ of undefined

Could this be related to a library thats not included or referencing an old library?

@pobch > thanks for your suggestion as it works perfectly and allowed me to proceed on to the next chapter.

I’ve never seen anybody else run into that forEach error before. Were you able to move past this?

No sir,

So after searching high and low, I think this has to do with the version of REACT and or eslint I had on my windows machine. I’m going to uninstall everything and go through the process again from the start to see if I can use a lower version of REACT and eslint.

Hopefully downgrading to REACT Scripts to 3.0.1 will work… still not sure how to do that but what are your thoughts? Maybe even reverting eslint to 6.4.0 could help.

Here is a link to some folks having the same issue. > https://github.com/facebook/create-react-app/issues/7753

Oh that’s not good. Cos you shouldn’t have to touch the ESLint versions directly.

Was there a solution for the ‘props.userHasAuthenticated is not a function’ question? I’ve been searching all day and couldn’t find anything.

I replied in the other thread. But can you post your code?

Here’s a little snippet of my app.js. I’ve been stuck on this for a while now.

function App(props) {
  const [isAuthenticated, userHasAuthenticated] = useState(false);

  async function handleLogout() {
    await Auth.signOut();

    userHasAuthenticated(false);

    props.history.push("/login");
  }

  return (
        <div>
    <header  className="header" data-testid="header">
     
        <Menu  mode="horizontal">

            <Menu.Item key="logo" disabled>
            <Link to="/"></Link>
            <img alt="logo" className="ant-menu-item" src={logo}/>
            </Menu.Item>

            <Menu.Item style={{float: 'right'}} key="login">
            <Link to="/signup"></Link>
            Signup
            </Menu.Item>

            <Menu.Item style={{float: 'right'}} key="logout" >
            <Link to="/login"></Link>
            Log In
            </Menu.Item>   
            
          </Menu>

        </header>
        <Routes appProps={{ isAuthenticated, userHasAuthenticated }}/>
      </div>
   
  );
}

export default withRouter(App);

Which component is generating the error? You need to make sure it is being passed in properly.

I’m seeing an issue where the login screen is briefly displayed before the authenticated route is shown. I think it’s happening on cold starts and page refreshes. Is anyone else seeing this?

Hmmm that shouldn’t happen. Did it just start happening for you?