React: “Undefined” when binding an exported function

Question

Let me preface this with saying I am new to React and JS in general, so far the documentation I've read hasn't helped me with this issue and I've seem to hit a wall.

I have two js files, one is login.js and the other is menu.js. I'm trying to output the token (from login.js) to the console which is triggered by an OnClick function (in menu.js) I'm getting an Undefined error when I click. The end goal is for me to be able to have access to the token I get from login.js and use it in other files and components so I can retain authentication after login. What am I missing?

Thanks

**//login.js snippet**

var jsforce = require('jsforce');
var conn = new jsforce.Connection({
  oauth2 : {
    // you can change loginUrl to connect to sandbox or prerelease env.
    loginUrl : 'https://test.salesforce.com',
     clientId : '0123456789',
    clientSecret : '0123456789',
    redirectUri : 'https://test.salesforce.com/services/oauth2/token',
  }
});
conn.login(email, password, function(err, userInfo) {
  if (err) { return console.error(err,email,password);
 }
  // Now you can get the access token and instance URL information.
  // Save them to establish connection next time.
  //console.log(conn.accessToken);
  console.log(conn.instanceUrl);
  exports.token = conn.accessToken


  // logged in user property
  console.log("User ID: " + userInfo.id);
  console.log("Org ID: " + userInfo.organizationId);
  // ...
    //Forward na Profil screen
    setTimeout(function(){
      forwardTo('/menu');
    },1280);  


})





**//Menu.js snippet**

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
import { render } from 'react-dom';
import login from '../pages/login.js';
var jsforce = require('jsforce');


onLinkClicked () {

    console.log(login.token)
  }


  render () {

    return (
        <div className='menubox' id='menubox'>

     <button
            type='submit'
            onClick={this.onLinkClicked.bind(this)}>
            Search
          </button>
      </div>
    )
  }



}



export default menuScreen;

Answer 1

Are you sure if login response is valid or loaded when you clicked? You can use developer tools in chrome and check what response is.

Answer 2

I was able to save the token using sessionStorage.setItem("token", token); in login.js and retrieved the token from menu.js by adding accessToken : sessionStorage.getItem('token') to the onClick function. I guess sessionstorage is the way to go to if you want to access authentication data globally.I was able to successfully query the site. Thanks for the help!

**//login.js snippet**

var jsforce = require('jsforce');
var conn = new jsforce.Connection({
  oauth2 : {
    // you can change loginUrl to connect to sandbox or prerelease env.
    loginUrl : 'https://test.salesforce.com',
     clientId : '0123456789',
    clientSecret : '0123456789',
    redirectUri : 'https://test.salesforce.com/services/oauth2/token',
  }
});
conn.login(email, password, function(err, userInfo) {
  if (err) { return console.error(err,email,password);
 }

  var token = conn.accessToken;

  console.log(conn.instanceUrl);
  exports.token = conn.accessToken


  sessionStorage.setItem("token", token);


  // logged in user property
  console.log("User ID: " + userInfo.id);
  console.log("Org ID: " + userInfo.organizationId);
  // ...
    //Forward na Profil screen
    setTimeout(function(){
      forwardTo('/menu');
    },1280);  


})





**//Menu.js snippet**

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
import { render } from 'react-dom';
import login from '../pages/login.js';
var jsforce = require('jsforce');





onLinkClicked () {
   var jsforce = require('jsforce');



var jsforce = require('jsforce');

var conn = new jsforce.Connection({
  serverUrl : 'https://cs63.salesforce.com',
  accessToken : sessionStorage.getItem('token')
 })
 conn.search("FIND {Un*} IN ALL FIELDS RETURNING Account(Id, Name), Lead(Id, Name)",
  function(err, res) {
    if (err) { return console.error(err); }
    console.log(res);
  }
)
}

      render () {

        return (
            <div className='menubox' id='menubox'>

         <button
                type='submit'
                onClick={this.onLinkClicked.bind(this)}>
                Search
              </button>
          </div>
        )
      }



}



export default menuScreen;