how do I call or pass the value from one js file to another file in react js

Question

I am completely new to Reactjs world,

How do I call selected "start_date" and "end_date" from exportExcelPage.js to exportAPICall.js file.

I have created date fields in exportExcelPage.js, these fields value I need to pass to exportAPICall.js file.

I have tried to pass through the function like below: exportExcelPage.js

{
            startDate && endDate && 
            <Button id="button" variant="contained" size="large" className={classes.button} startIcon={<CloudDownloadIcon />} onClick={exportAPICall(startDate, endDate)}>
              {DOWNLOAD}
            </Button>
          }

exportAPICall.js

export default function exportAPICall(startDate, endDate){
.............
}

after that able to get dates value in console but the problem is when I select the endDate automatically it will triggering the api call without click the downlad button.

please help me, how to call these two fields in exportAPICall.js file.

exportExcelPage.js

import React, { useState } from "react";

//styles
import "../../styles/App.css";
import "react-datepicker/dist/react-datepicker.css";

//imports
import DatePicker from "react-datepicker";
import addMonths from 'date-fns/addMonths';
import format from 'date-fns/format';
import exportImage from '../../images/exportImage.jpg';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import {TITLE, NOTE_DESC, NOTE, START_DATE, END_DATE, DOWNLOAD} from '../../utilities/text';

//api call
import exportAPICall from "../../api/exportAPICall";

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
  },
}));

function ExportExcelPage() {
  const classes = useStyles();
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleStartDate = (date) => {
    setStartDate(date);
    setEndDate(null);
  };

  const handleEndDate = (date) => {
    setEndDate(date);
  };


  if (startDate) {
    var maxDate = startDate;
    maxDate = format(addMonths(startDate, 36), " E MMM dd yyyy HH:mm:ss ");
    var strToDate = new Date(maxDate);
    console.log("maxDate value ==" + maxDate);
    console.log("string to date value ==" + strToDate);
  }


  return (
    <div className="App" id="container">
      <div className="input-container">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"></link>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
        <script src = 'header.js'></script>
        <img src={exportImage} id="ui-image"></img>
        <div >
          <h4 id="title"><b>{TITLE}</b></h4>
          <form id="form-css">
            <DatePicker id="startDate-css" placeholderText={START_DATE} dateFormat='dd-MM-yyyy' selected={startDate} onChange={handleStartDate}/>
            <span>   <b id="dash-space">-</b>    </span>
          <DatePicker id="endDate-css" placeholderText={END_DATE} dateFormat='dd-MM-yyyy' selected={endDate} minDate={startDate} maxDate={strToDate} onChange={handleEndDate}/>
          </form>
          <p id="note"><b>{NOTE}</b><span id="space"></span>{NOTE_DESC}</p>
          {
            startDate && endDate && 
            <Button id="button" variant="contained" size="large" className={classes.button} startIcon={<CloudDownloadIcon />} onClick={exportAPICall}>
              {DOWNLOAD}
            </Button>
          }
        </div>
      </div>
    </div>
  );
}

export default ExportExcelPage;

exportAPICall.js

import { formatMs } from "@material-ui/core";
import axios from "axios";
import * as moment from 'moment';
import {EXPORT_API} from '../utilities/endpoints';

export default function exportAPICall()
{
    const current_date = moment(new Date()).format("YYYY-MM-DD_HHmmss");

    let url = process.env.REACT_APP_MS_BASEURL + EXPORT_API();

    let data = {
        auth: false,
        op: "",
        currentUser : {}
    };

    let postData = {
        "Id": 190,
        "startDate" : "2021-06-01T03:48:46.174Z",
        "endDate" : "2021-06-16T03:48:46.174Z"
    }
    

    
    axios.post(url, postData, { 
        withCredentials : true
        
    })
    .then(r => {
        console.log("gettoken",r);
        data.auth = true;
        data.op = r.headers['x'];
        data.currentUser = r.data;
        //dispatch(GetActionObject(loginMod.actionType+'/'+Constants.STATUS_SUCCESS, data));
        //  setGlobalState_callback(data);

     var fileURL = window.URL.createObjectURL(new Blob([r.data]));
     var fileLink = document.createElement('a');
    
     fileLink.href = fileURL;
     fileLink.setAttribute('download', 'AdminReport_'+current_date+'.zip');
     document.body.appendChild(fileLink);
     
     fileLink.click();
        
    })
    .catch(e=>{
        console.log(e);
        if(e.response)
        {
            data.error = e.response.data;
        }
        else 
        {
            data.error = e.message;
        }
        //dispatch(GetActionObject(loginMod.actionType+'/'+Constants.STATUS_FAILED, data));
        //setGlobalState_callback(data);
    });  
 
}

export {exportAPICall}

Answer 1

Try calling the exportApiCall function like this and it will solve your problem:

{
  startDate && endDate && 
  <Button
    id="button"
    variant="contained"
    size="large"
    className={classes.button}
    startIcon={<CloudDownloadIcon />}
    onClick={() => { exportAPICall(startDate, endDate) }}
  >
    {DOWNLOAD}
  </Button>
}

You need the pass the function to onClick not invoke it. The function will be invoked when the click event is fired.