How to call a React component function from outside?

Question

React

There is a Chart component (to create a chart chart.js ):

import React, { useState, useEffect, useRef } from 'react';
import ChartJs from 'chart.js';

const chartConfig = {
  type: 'bar',
  data: {
    labels: [],
    datasets: [{
      label: '',
      data: [],
      backgroundColor: [],
      borderColor: [],
      borderWidth: 0,
      barPercentage: 1.0
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: true,
    spanGaps: false,
    legend: {
      display: false
    },
    plugins: {
      filler: {
        propagate: false
      }
    },
    tooltips: {
      enabled: true
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
          offsetGridLines: true
        }
      }],
      yAxes: [{
        gridLines: {
          color: 'rgba(242, 243, 244, 1.0)',
          zeroLineWidth: 0
        },
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
};

const Chart = (props) => {
  const chartContainer = useRef(null);
  const [chartInstance, setChartInstance] = useState(null);

  const updateDataset = (datasetIndex, newLabels, newData) => {
    chartInstance.data.labels = props.labels;
    chartInstance.data.datasets[datasetIndex].data = props.data;
    chartInstance.update();
  };

  useEffect(() => {
    if (chartContainer && chartContainer.current) {
      const newChartInstance = new ChartJs(chartContainer.current, chartConfig);

      setChartInstance(newChartInstance);
    }
  }, [chartContainer]);

  return (
    <React.Fragment>
      <canvas ref={chartContainer} />
    </React.Fragment>
  );
};

export default Chart;

Next, I import it already in the working component: And in the body of the component (jsx layout) I insert it like this: The question is, how is it now in the working component, where I inserted to call its function (and pass it: datasetIndex, newLabels, newData) data updates - updateDataset?
import Chart from '../../components/Chart';

<Chart />

<Chart />

Answer 1

1) How does updateDataset work? What does it change if it doesn't change the state? It calls the chartInstance properties, but I don't see where you use this object?
2) The React logic is such that all communication from the parent to the children goes exclusively through props, so if you want to change something in the child element, you must change the state of the parent so that the necessary props are passed to the child element, which are processed would be in a child element. For example, in the parent draw an element like this

<Chart updateData={ [datasetIndex, newLabels, newData] }/>

and in Chart you process

if (props.updateData) updateDataset(...props.updateData)

This approach will follow the principles of React.
3) If you still want to do it your way, then just pass the value setting function to Chart

let updateDataHandler = {}
return <Chart updateDataHandler={ h => { updateDataHandler = h } }/>

and inside the Chart write
props.updateDataHandler(updateDataset)
now in the parent component updateDataHandler will refer to the Chart function And you can safely call it

Answer 2

What you want to do is not the right thing to do - you need to pass data through props,
then take these props in useEffect and update chartInstance.