Reagoni - merrni të dhëna nga komponentët funksionalë të fëmijës në prind

Kam komponentë funksionalë, prind tavoline dhe fëmijë rresht. Kontrollet e fëmijëve inicohen nga të dhënat e dhëna nga prindi. Kontrollet përdorin useState hook për të përditësuar artikujt individualë. Pra, të dhënat e tyre fillestare të vargut të rreshtave në prind, dhe gjendjet aktuale në rreshtat individualë. Tani dua të shtoj një buton Ruaj poshtë tabelës në Prind, për të vazhduar ndryshimet. Unë e kuptoj që mund t'i kaloj kthimin e telefonatave tek Fëmija, por ç'të themi për faktin që veprimi është ekzekutuar te Prindi dhe ka nevojë për të dhëna nga shumë fëmijë? Mund të ekzekutoj kursimin për rreshtat fillestarë, por dua ta ekzekutoj në grup për të gjitha rreshtat e pranishëm, kështu që duhet të bëhet në prind dhe të iniciohet nga prindi.

Prindi:

export default function RozliczeniaFaktur ({web, context, formType}: IRozliczeniaFakturProps) {
    const [dataRows, setDataRows] = React.useState(emptyRowArr);
    const [isError, setIsError] = React.useState(false);
    const [errorMessage, setErrorMessage] = React.useState(null);

[...]
    
    return (
      
      <div className={styles.rozliczeniaFaktur}>
      <Stack tokens={stackTokens}>
      {isError && <MessageBar messageBarType={MessageBarType.error} isMultiline={false} >
        {errorMessage}
      </MessageBar>} 
      <div className={styles.dataTable}>
        <div className={styles.scrollContainer}>
        <table id='rozliczenia' className={styles.table}>
          <thead>
            <tr>
[...]
            </tr>
          </thead>
          <tbody>
             {dataRows && 
                dataRows.map((dataRow, i) => {
                  return <TableRowControl web={web} key={i} Context={context} RowId={i}  FormType={formType}
                    onAddRowCallback={addRow} onDeleteRowCallback={delRow}  />
                })
              }
          </tbody>
        </table>
        </div>
        <div>

        </div>
      </div>
      </Stack>
    </div>
    );
  
}

Fëmija:

const TableRowControl = ({RowId, Context, PozFaktury, FormType, onAddRowCallback, onDeleteRowCallback, web, 
    onErrorCallback, OrganizacjaDictionary, VatDictionary, MpkDictionary, KontoDictionary, ZastepstwaDictionary,
    ZaliczkaDictionary} : ITableRowControlProps) => {   
    const [oddzialRozliczenia, setOddzialRozliczenia] = React.useState<number | string>(PozFaktury.OddzialRozliczenia);
    const [dataSprzedazy, setDataSprzedazy] = React.useState<Date>(PozFaktury.DataSprzedazy);
    const [dataOtrzymania, setDataOtrzymania] = React.useState<Date>(PozFaktury.DataOtrzymania);
    const [vat, setVat] = React.useState<string | number>(PozFaktury.StawkaVAT);
    const [nip, setNip] = React.useState<string>(PozFaktury.NIPDostawcy);
    const [waluta, setWaluta] = React.useState<string | number>(PozFaktury.Waluta);
    const [nrDok, setNrDok] = React.useState<string>(PozFaktury.NRDokumentu);
    const [kwota, setKwota] = React.useState<string>(PozFaktury.KwotaBrutto.toString())
    const [mpk, setMpk] = React.useState<string | number>(PozFaktury.MPK);
    const [konto, setKonto] = React.useState<string | number>(PozFaktury.KontoGL);
    const [magazyn, setMagazyn] = React.useState(PozFaktury.Magazyn);
    const [nrPz, setNrPz] = React.useState(PozFaktury.NrPZ);
    const [opis, setOpis] = React.useState(PozFaktury.Opis);
    const [zaliczka, setZaliczka] = React.useState<string | number>(PozFaktury.Zaliczka);
    const [aprobata1status, setAprobata1status] = React.useState(PozFaktury.Aprobata1Status);
    const [aprobata2status, setAprobata2status] = React.useState(PozFaktury.Aprobata2Status);
    const [komentarz, setKomentarz]



    return(
        <tr>
[...]
        </tr>
        );
}

export default TableRowControl;