JavaScript and ReactJs

Question

I have separate js file call api.js and there i define a function

FetchDetails = function auth() {
   return {
     initialize: function() {

          var deferredObject = $.Deferred();

         var config = {
           'client_id': '',my client id
           'scope': 'https://www.google.com/m8/feeds'
         };

         gapi.auth.authorize(config, function () {
           var token = gapi.auth.getToken();
           var contacts = {
             contact: []
           };
           var name;
           var friends;

           $.ajax({
             url: "https://www.google.com/m8/feeds/contacts/default/full?access_token=" + token.access_token + "&alt=json&max-results=3000",
             dataType: "json",
             success: function (data) {
               var json_res = JSON.stringify(data);
               var response_as_array = jQuery.parseJSON(json_res);
               for (var i = 0; i < response_as_array['feed']['entry'].length; i++) {
                 name = response_as_array['feed']['entry'][i]['title']['$t'] != null ? response_as_array['feed']['entry'][i]['title']['$t'] : null;
                 if (response_as_array['feed']['entry'][i]['gd$email'] != null && name != null && name != "") {
                   contacts.contact.push({
                     "fullName" : name,
                     "email"  : response_as_array['feed']['entry'][i]['gd$email'][0]['address']
                   });
                 }
               }
               deferredObject.resolve(contacts);
             }
           });
         });

         return deferredObject.promise();
     }
   };
}

I need to call this function inside my .jsx file handleClick() method. you can see the .jsx file below

import { Component, PropTypes } from 'react';

export default class FriendRight extends Component {

  handleClick() {
    require ('../api_call/apis.js');
    FetchDetails().initialize().then(function(results) {
      this.setState({
        contacts: results.contact
      });
    }.bind(this));
  }

  render(){
    return(
      <div><ul class="list-group">
        <li className="list-group-item"><button type="button" className="btn btn-default" onClick={this.handleClick}>Yahoo</button></li>
        <li className="list-group-item"><button type="button" className="btn btn-default">Gmail</button></li>
        <li className="list-group-item"><button type="button" className="btn btn-default" >Outlook</button></li>
        <li className="list-group-item"><button type="button" className="btn btn-default" >Facebook</button></li>
      </ul>
    </div>
  );
}

}

I'm getting this error when i call this function

Uncaught ReferenceError: FetchDetails is not defined

Answer 1

You need to export and import FetchDetails, e.g. in your api.js module:

export const FetchDetails = function auth() { // ...

and in your jsx file:

import { FetchDetails } from './api.js';

I suppose api.js and jsx file is in the same directory, otherwise you need to provide relative path in import statement.