Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

reactjs problem with ref

Answered
Fernando Matté Fagundes asked on July 6, 2020

Hello.
 
I’m having problems when I change a field that together with the flexmonster component
 
For example:
When I type in the “Text to Example” field, the “ref” lose the reference and access to ef.current.flexmonster() generater an erro.
 
The example are atthached

import React from ‘react’;
import * as FlexmonsterReact from ‘react-flexmonster/hooks’;
import TextField from ‘@material-ui/core/TextField’;
import Button from ‘@material-ui/core/Button’;

function PivotTable(props) {

const ref = React.useRef();

const [text, setText] = React.useState(“”)

const handleChangeText = (event) => {
setText(event.target.value)
}

const handleGetReport = (event) => {
const reportDetails = ref.current.flexmonster().getReport()
console.log(reportDetails)
}

 

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

return (<div>

<TextField
label=”Text To Example”
fullWidth
value={text}
onChange={handleChangeText}
InputLabelProps={{
shrink: true,
}}
/>

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

<Button
variant=”contained”
color=”primary”
onClick={handleGetReport}
>
Execute get data

</Button>

</div>)
}

export default PivotTable;

 
 

4 answers

Public
Vera Didenko Flexmonster July 7, 2020

Hello, Fernando,
 
Thank you for reaching out to us and for providing a code sample. 
 
For such cases, we kindly recommend using a React class component instead of a React Hook. 
Please see the following example of how Flexmonster is used as a class component.
 
We would like to mention that in case of a class component, the Flexmonster instance should be accessed the following way:

const reportDetails = ref.current.flexmonster.getReport();

 
 
Please let us know if this helps to resolve the problem.
Waiting for your feedback.
 
 
Kind regards, 
Vera

Public
Fernando Matté Fagundes July 7, 2020

Thank you Vera.
I try to use the code below, whatever I don’t know how is to link this “ref” to the component’s react  class. My questions is: Where do I get this “ref”? or How to do to create this ref?

const reportDetails = ref.current.flexmonster.getReport();

Here a example code for my question:
https://github.com/adsimbr/talento-javascript/blob/master/example.js
 
Best regards, 
Fernando

Public
Fernando Matté Fagundes July 7, 2020

Hi Vera, 
I did it, you have to use

this.refFlexmonster = React.createRef ();

With that, the component works correctly
working code example
https://github.com/adsimbr/talento-javascript/blob/master/example-2.js

Public
Vera Didenko Flexmonster July 8, 2020

Hello, Fernando,
 
Thank you for the update and for sharing the result. 
 
We are glad to hear that using Flexmonster as a class component helped to resolve the issue.
 
If further questions arise, please feel free to reach out.
 
Kind regards, 
Vera

Please login or Register to Submit Answer