title: Not able to access an id property from props in React
body: <p>I'm trying to build a React app where users can save specific things under their ID.
  I'm using nodeJS with React and auth0 for authentication.</p>
  
  <p>I'm trying to access a property on the this.props.auth object and find if that property exists in my db so if there's a match something can be saved under the user's ID.</p>
  
  <p>However I'm not able to access this.props.auth.id as shown in the code below but I can access this.props.auth</p>
  
  <p>Any pointers?
  .
  .
  .</p>
  
  <p>Auth.js</p>
  
  <pre><code>import history from '../../history';
  import auth0 from 'auth0-js';
  import { AUTH0_CONFIG } from '../../auth0';
  import API from "../../utils/API"
  
  
  
  
  export default class Auth {
    accessToken;
    idToken;
    expiresAt;
    userProfile;
    userImage;
    name;
    id;
  
  
  
    auth0 = new auth0.WebAuth({
      domain: AUTH0_CONFIG.domain,
      clientID: AUTH0_CONFIG.clientId,
      redirectUri: AUTH0_CONFIG.callbackUrl,
      responseType: 'token id_token',
      scope: 'openid profile'
    })
  
  
  
    constructor() {
      this.login = this.login.bind(this);
      this.logout = this.logout.bind(this);
      this.handleAuthentication = this.handleAuthentication.bind(this);
      this.isAuthenticated = this.isAuthenticated.bind(this);
      this.getAccessToken = this.getAccessToken.bind(this);
      this.getIdToken = this.getIdToken.bind(this);
      this.renewSession = this.renewSession.bind(this);
      this.userInfo = this.userInfo.bind(this)
    }
  
    login() {
      this.auth0.authorize();
    }
  
    handleAuthentication() {
      this.auth0.parseHash((err, authResult) =&gt; {
        if (authResult &amp;&amp; authResult.accessToken &amp;&amp; authResult.idToken) {
          this.setSession(authResult);
          API.saveUser(authResult.idTokenPayload);
          history.replace('/')
        } else if (err) {
          history.replace('/');
          console.log(err);
          alert(`Error: ${err.error}. Check the console for further details.`);
        }
      });
    }
  
    getAccessToken() {
      return this.accessToken;
    }
  
    getIdToken() {
      return this.idToken;
    }
  
    userInfo() {
      return this.userProfile
    }
  
    setSession(authResult) {
      // Set isLoggedIn flag in localStorage
      localStorage.setItem('isLoggedIn', 'true');
      console.log(authResult);
      let expiresAt = (authResult.expiresIn * 1000) + new Date().getTime();
      this.accessToken = authResult.accessToken
      this.idToken = authResult.idToken;
      this.expiresAt = expiresAt;
      this.userImage = authResult.idTokenPayload.picture;
      this.name = authResult.idTokenPayload.name.split(' ', 1);
      this.id = authResult.idTokenPayload.nickname;
  
  
      // navigate to the home route
      history.replace('/');
  
    }
  
    renewSession() {
      this.auth0.checkSession({}, (err, authResult) =&gt; {
         if (authResult &amp;&amp; authResult.accessToken &amp;&amp; authResult.idToken) {
           this.setSession(authResult)
           console.log('authresult', authResult);
  
         } else if (err) {
           this.logout();
           console.log(err);
           alert(`Could not get a new token (${err.error}: ${err.error_description}).`);
         }
      });
    }
  
    logout() {
      // Remove tokens and expiry time
      this.accessToken = null;
      this.idToken = null;
      this.expiresAt = 0;
  
      // Remove isLoggedIn flag from localStorage
      localStorage.removeItem('isLoggedIn');
  
      // navigate to the home route
      history.replace('/');
    }
  
    isAuthenticated() {
      // Check whether the current time is past the
      // access token's expiry time
      let expiresAt = this.expiresAt;
      return new Date().getTime() &lt; expiresAt;
    }
  
  
  }
  </code></pre>
  
  <p>Home.js</p>
  
  <pre><code>class Home extends Component {
  
    constructor(props) {
      super(props)
      console.log(this.props); // can access this
      console.log(this.props.auth.id); // this shows undefined
      this.state = {
        news: [],
        summary:[],
        summaryUrl: '',
        userID: '',
        user: '', // 
        pageLoading: true,
        gistLoading: true
      }
      // console.log(this.state);
    }
  
    goTo(route) {
    // console.log(history, route);
    this.props.history.replace(`/${route}`)
    }
  
    login() {
      this.props.auth.login();
    }
  
    logout() {
      this.props.auth.logout();
    }
  
    // API call to display trending news
  
    componentDidMount() {
  
      API.getArticles()
        .then(res =&gt; {
          this.setState({
            news: res.data,
            pageLoading: false,
            // user: this.props.auth.id
          })
          // console.log(this.state);
        });
  
        API.getSavedUsers()
          .then((res) =&gt; {
            console.log();
  
            res.data.forEach((el) =&gt; {
              console.log(this.props.auth.id); // shows undefined
              if(el.name ===  this.props.auth.id){
                this.setState({
                  userID: el.authID
                })
              } else {
                console.log('notfound');
              }
            })
            console.log(this.state);
          })
  
  
      const { renewSession } = this.props.auth;
      if (localStorage.getItem('isLoggedIn') === 'true') {
        renewSession();
      }
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/i7GkJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i7GkJ.jpg" alt="enter image description here"></a></p>