ref.current.flexmonster() returns null

Hello, Dan,
 
Thank you for reaching out to us. 
 
We have not managed to reproduce the issue: when React.useRef(null); is used to create the reference to the Flexmonster instance, Flexmonster API calls are accessible, for example, calling setReport():

function onReportComplete(){
     ref.current.flexmonster().off("reportcomplete");
     ref.current.flexmonster().setReport(report);
}

We kindly suggest seeing our sample React project on GitHub.
In case it doesn't help, could you please modify the sample so that the issue is reproducible?
This will help us to make further progress in solving the problem.
 
Looking forward to your reply.
 
Kind regards,
Vera

Hello, Dan,
 
Thank you for your response.
 
Still, we have not managed to reproduce the issue using our sample project on GitHub.
The following code snippet compiles and runs successfully: 

import React from 'react';
import * as FlexmonsterReact from 'react-flexmonster/hooks';

function PivotTableHooks (props) {

   const ref = React.useRef(null); 

   const onReportComplete = () => {
      const flexMonsterRef = ref.current.flexmonster();
      console.log(">>>>", flexMonsterRef.getReport());
   }

   return <div className="App">
            <FlexmonsterReact.Pivot 
               ref={ref} 
               toolbar={true} 
               width="100%"    
               report="https://cdn.flexmonster.com/reports/report.json" 
               reportcomplete={onReportComplete}/>
          </div>; 
}

export default PivotTableHooks;

Please let us know if there is something we are missing. 
Also, could you please confirm if you have managed to run our sample Flexmonster with the React project successfully?
 
Waiting for your reply.
 
Kind regards,
Vera

Hello, Dan,
 
Thank you for your response. 
 
We would like to confirm that there should be no conflicts between Flexmonster and WebDataRocks. 
Adding both Flexmonster and WebDataRocks to the same functional component works fine on our end. 
We have assigned a separate ref object for each of them, for example: 

import React from 'react';
import * as FlexmonsterReact from 'react-flexmonster/hooks';
import * as WebDataRocksReact from './webdatarocks.react';


function PivotTableHooks (props) {


const refFlex = React.useRef(null);

const refWeb = React.useRef(null);


const onReportCompleteFlex = () => {

   const flexMonsterRef = refFlex.current.flexmonster();
   console.log("Flexmonster >>>>", flexMonsterRef.getReport());
}


const onReportCompleteWeb = () => {

  const weDataRocksRef = refWeb.current.webdatarocks;
  console.log("WebDataRocks >>>>", weDataRocksRef.getReport());

}


return <div className="App">

         <FlexmonsterReact.Pivot
           ref={refFlex}
           toolbar={true}
           width="100%"
           report="https://cdn.flexmonster.com/reports/report.json"
           reportcomplete={onReportCompleteFlex}/>

         <WebDataRocksReact.Pivot
           ref={refWeb}
           toolbar={true}
           width="100%"
           report="https://cdn.webdatarocks.com/reports/report.json"
           reportcomplete={onReportCompleteWeb}/>

       </div>;

}

export default PivotTableHooks;

Please let us know if there is something else that we might have missed. 
 
Also, we have attached the simple React project with Flexmonster and WebDataRocks that we have created in the process (please see Flexmonster_WebDataRocks_React_project.zip in the attachments below).
To start the project, please run the following commands: 

1. npm install

2. npm start

 
Could you please confirm if the project works on your end also?
 
Looking forward to your reply. 
 
Kind regards, 
Vera

Hello, Dan, 
 
Thank you for giving us some time.
 

1. To avoid possible misunderstandings, we would like to provide a summary of the case so far: 

   1.1) You integrated WebDataRocks with React successfully: calling WebDataRocks API calls works.
   1.2) You integrated Flexmonster with React, however, calling Flexmonster API calls results in null.
   1.3) Our team has not managed to reproduce the issue on our end using our sample project.
   1.4) You have found a way to fix the issue, however, you are searching for a better solution.

2. Brining the above points together, we kindly recommend the following course of action:

   2.1) Integrating Flexmonster using the React Class Component approach:

   Judging from the code snippets, it seems you are using Flexmonster for React Hooks.
   Please notice that in contrast WebDataRocks integration is based on a React Class Component.

   Hence, our team kindly suggests trying integrating Flexmonster into your React project using a React Class Component.

   Please let us know if this helps to solve the issue.

   2.2) If using the React Class Component approach doesn't help, or is not appropriate for your case:

   Please kindly note that it is essential for our team to reproduce the same issue you encounter in order to fix the problem.

   Therefore, our team kindly asks if you could provide the React sample project (with dummy data) where the issue occurs (this can be done via email).

   This will help us to make further progress in solving the problem and provide an appropriate solution.

 
 
Waiting for your reply.
 
Kind regards,
Vera

Hi Kevin,
 
It is great to hear that you've managed to fix the mentioned issue.
 
Also, thank you for sharing your insights, we hope this helps someone in the future. In case you have any updates regarding this approach, feel free to share them here.
 
Have a great week!
 
Regards,
Mykhailo