i am passing parameter from one function to another function in reactJs but result is coming null

Question

This is my first file with function 1

import React, {Component} from "react";
import axios from 'axios';
import { config } from '../../config/config.js';
class Dashboard extends Component {
  constructor(props) {
    super(props);
  }
  componentWillMount(){
      var obj = {
          campaign:campaignName,
          campaignId:campaignId,
          clientId:clientId,
          clientName:clentName,
          end:endDate,
          start:startDate,
          timeZone:new Date().getTimezoneOffset(),
          ReportName:'Chargebacks',
          widgetName:'Billing Cycle'
    }
     var resdata = ChartAPI.widgetApiCalls(config.apiUrl,obj);
     console.log(resdata );
  }
}

And this is another one with function 2

import axios from 'axios';
 function charts(){
     this.widgetApiCalls =  function(url,parmsobj){
        var byresspose=[];
        axios.get(url+"/reports",{params:parmsobj})
          .then(function(response){        
                for(var i in response.data){
                    byresspose.push({"label":"Billing Cycle"+" "+response.data[i].billingCycle,"value":response.data[i].total})
                }
                console.log(byresspose);
          });
          return  byresspose;
      };
 }
charts = new charts();
module.exports = charts;

What is the correct way to pass parameter from one function 1 to another function 2?

You mean you want to pass data to `charts` function from first file ? — Panther, Oct 25 '17 at 06:58
Check this one also: [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Mayank Shukla, Oct 25 '17 at 07:00
import ChartsAPI from './charts.js'; acutally i add this statement — Venkaiah Vempalla, Oct 25 '17 at 07:18

dhilt · Answer 1 · 2017-10-25T07:15:30.207

You need to import your charts module to your Dashboard Component source file:

import ChartsAPI from './charts.js';

And then you will be able to call it on componentWillMount:

 var chartsAPI = new ChartsAPI();
 chartsAPI.widgetApiCalls(config.apiUrl,obj).then(function(result) {
   var resdata = result;
   console.log(resdata);
 });

This also requires widgetApiCalls to return Promise:

this.widgetApiCalls =  function(url,parmsobj){
  return axios.get(url+"/reports",{params:parmsobj})
      .then(function(response){
            var byresspose=[];        
            for(var i in response.data){
                byresspose.push({"label":"Billing Cycle"+" "+response.data[i].billingCycle,"value":response.data[i].total})
            }
            console.log(byresspose);
            return byresspose; // this will come to the Dashboard `widgetApiCalls.then`
      });
  };

Accurate, but you could provide a little more detail about what the problem with his code was and why this fixes it. Specifically how promised are delayed and the value can't be returned traditionally — caesay, Oct 26 '17 at 04:56

guan.yongchen · Answer 2 · 2017-10-25T07:14:34.270

callback

promise

async&await

i prefer the last one. its a typical Asynchronous problem.

componentWillMount(){
          var obj = {
              campaign:campaignName,
              campaignId:campaignId,
              clientId:clientId,
              clientName:clentName,
              end:endDate,
              start:startDate,
              timeZone:new Date().getTimezoneOffset(),
              ReportName:'Chargebacks',
              widgetName:'Billing Cycle'
        }
         this.getData(config.apiUrl,obj)

      }
       async getData(url, obj) => {
            var resdata = await ChartAPI.widgetApiCalls(url,obj);
            console.log(resdata );

}

besides that i think that you don't need to defined chartAPI as a single module. just defined it in the component

i am passing parameter from one function to another function in reactJs but result is coming null

2 Answers2