How to replace the 'this.' in the functional React Native with Hooks?

Question

I'm trying to use the following react-native-echarts-wrapper but in my projects all my components are made using hooks. So, when I have a state variable that changes its state I want to execute the function setOption(option) where the option contains the state value.

The problem is that in the documentation the function setOption() is referenced using this.chart.setOption(option). If I try to put without the this. I get a message where chart is undefined and if I only use function I get the message saying that setOption is not a function.

So is there a way to get the reference of the chart component and its functions using RN Hooks?

Here is my code:

const [radarChartData, setRadarChartData] = React.useState([])
const option = { 
title: {
    show:false,
    text: 'Gráfico Radar'
},
tooltip: {},
legend: {
orient: 'horizontal',
position:'bottom',
left: 0,
bottom:0,
type:'scroll',             
pageButtonPosition:'end', 
data: chartColumnNameArray,
},
radar: {
    radius:'70%',
    name: {
        textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
        }
    },
    indicator: chartValueArray.map((item, index)=>{
    return {name:chartColumnNameArray[index].toUpperCase().substring(0,5).concat('.'), max:maxValue}
    })
},
series: [{
    name: 'TEST',
    type: 'radar',          
    data: radarChartData <------------------- //when this state changes I would setOptions and reload chart
}]
};

<View style={{display:  visibleChart==="radarchart"?"flex":"none", width:'100%', height:'60%'}} >                     
         <ECharts option={option} additionalCode={React.useEffect(()=>{this.chart.setOption(option)},[radarChartData])}/>                                                              
</View>

Answer 1

You will have to use the 'useRef' hook to get access to the chart, even in the examples that are provided they use a reference to the chart and update it. I've made a basic example to change the background color which will give you the idea on how use the hook with the charts. Simply set the ref and use chart.current instead of this.chart.

import React, { Component } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import { ECharts } from 'react-native-echarts-wrapper';

export default function App() {
  const chart = React.useRef(null);
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      },
    ],
  };

  return (
    <View style={styles.chartContainer}>
      <Button
        title="Update"
        onPress={() => {
          if (chart) {
            chart.current.setBackgroundColor('rgba(0,255,0,0.3)');
          }
        }}
      />
      <ECharts
        ref={chart}
        option={option}
        backgroundColor="rgba(93, 169, 81, 0.4)"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1,
  },
});