Tengo un componente de función dentro del cual renderizo el componente AgGrid como se muestra a continuación;

 <AgGrid id="dataListGrid" containerProps={{style: {height: gridData.length * 30, minHeight: 180}}} className="customGrid" columnDefs={dataListColumns} frameworkComponents={{checkboxColRenderer: checkboxColRenderer}} gridDescription="List" onGridReady={handleGridReady} rowData={gridData} enableBrowserTooltips={true} pagination paginationPageSize={100} onCellClicked={onCellClicked} onRowSelected={(params) => { params.api.redrawRows({ rowNodes: [params.api.getPinnedBottomRow(0)], }); }} isFullWidthCell={(rowNode) => rowNode.rowPinned === 'bottom'} fullWidthCellRenderer={CustomPinnedRowRenderer} pinnedBottomRowData={[{}]} {...props} />

Mi estado de gridData es el siguiente;

 let gridData = [{ checked: true, fmIdentifier: 'Test data 1', category: 'Test', comments: 'Test', fm: 'Test', gti: 'Test data', wins: 'Test', identifier: 'Test', status: 'Test data', }, { checked: false, fmIdentifier: 'Test data 2', category: 'Test', comments: 'Test', fm: 'Test', gti: 'Test data', wins: 'Test', identifier: 'Test', status: 'Test data X', rowPinned: 'bottom' }]

Ahora el checkboxColRenderer es el siguiente;

 import React from 'react'; export default (props) => { return ( <span> <input type="checkbox" checked={props.data.checked} /> </span> ); };

Por lo tanto, para cada una de las filas, se representa una casilla de verificación y quiero sincronizar el estado con el componente de función principal/principal. Estoy tratando de obtener de alguna manera el estado principal desde dentro de checkboxColRenderer, es decir, en el objeto de accesorios. Pero no veo nada. ¿Alguna forma mejor de sincronizar el estado de la casilla de verificación con los datos subyacentes, es decir, marcar/desmarcar?