I have functional components, a table parent, and row child. The child controls are initiated by data passed from parent. The controls use useState hook to update the individual items. So theirs initial dataRows array in the parent, and current states in individual rows. Now I want to add a Save button below the table on the Parent, to persist changes. I understand that I can pass callback to Child, but what about the fact that the action is executed on the Parent and needs data from multiple Children? I could potentially execute save for initial rows, but I want to run it in batch for all rows present, so it needs to be done on parent, and initiated from the parent.
Parent:
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>
);
}
Child:
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;
