next.js how to change parent state from child component without triggering a button?

Question

I have a SlaTable component to calculate and show a table of time values.

Below this table, I want to show a diagram based on the calculated values of SlaTable.

How can I return values from SlaTable to use them in another component?

<SlaTable
  times={times}
  monthList={monthList}
  balanceValue={balanceValue}
  slaFilter={slaFilter}
  billableFilter={billableFilter}
/>


<Diagram 
 labels={chartLabels}
 values={chartValues}
/>

Thanks in advance

Frank

Answer 1

I think I found the answer.

I have to use useEffect inside my component. So my solution looks like this:

import { useState } from "react";
function Sla(props) {
const [chartData, setChartData] = useState([]);
const changeChartData = (arg) => {
    setChartData(arg);
  };

return (
  <>
   <SlaTable
     times={times}
     monthList={monthList}
     balanceValue={balanceValue}
     slaFilter={slaFilter}
     billableFilter={billableFilter}
     changeChartData={changeChartData}
   />
  </>
)
}

And inside the SlaTable component it's like this:

import { useEffect } from "react";
function SlaTable(props) {
  const changeChartData = props.changeChartData;
  const monthList = props.monthList;
  
  let totalMonth = [];

  // ----------------------------------------
  // fill total month with zeros
  // ----------------------------------------

  monthList.forEach(() => {
    totalMonth.push(0);
  });

  // call the changeChartData function when component 
  // finished rendering
 
  useEffect(() => {
    changeChartData(totalMonth);
  }, [totalMonth.length]);

  return (
   <>
    HTML output
   </>
   );
}

If I would not use useEffect inside the component, I would get an error that I cannot update a component while rendering a different component