0

I am building a react functional component with an AgGridReact:

const DataGrid = (props) =>
{                                                                           
   const [gridRowData, setGridRowData] = useState([]);
   const [columnDefinition, setColumnDefinition] = useState([]);

useEffect(async () =>
    {
      if(props.name && props.name !== "")
      {
        ... get grid row data and column definition here according to props.name - working fine
      }
    },[props.name]);

let frameworkComponents = {
  customLoadingOverlay: LoadingOverlayTemplate,
      customNoRowsOverlay: UxDataGridCustomNoRows,
      editButton: params => <ViewAndDeleteSetting {...params}  
          openAddConfigurationsWindow={openAddConfigurationsWindow}
          onDeleteSetting={onDeleteSetting} />
};
.
.
.
const onDeleteSetting = async () =>
{
  console.log("ON DELETE AND NAME IS: " + props.name ); //PRINTS AN EMPTY STRING
   ...
}

return (
  <AgGridReact
            columnDefs={columnDefinition} 
            rowData={gridRowData} 
            frameworkComponents={frameworkComponents}/>
);

As you can see in the comment in onDeleteSetting, the name is empty when this callback is invoked. The rendering of the cell itself is fine and ViewAndDeleteSetting is indeed rendered, just it seems like it is being rendered only once and not every time the name changes. How can I cause the inner ViewAndDeleteSetting component to be re rendered with the most recent frameworkComponents?

CodeMonkey
  • 11,196
  • 30
  • 112
  • 203
  • your `onDeleteSetting` function reads the props of the agGrid component, so if you don't refresh the entire component with new props, the name printing would be the same. i don't get exactly why you think the name would change, but maybe try to add arguments to the `onDeleteSetting` method form the `ViewAndDeleteSetting ` component. – Kaki Master Of Time Jan 13 '21 at 20:26

1 Answers1

0

The problem was with how I tried passing props to ViewAndDeleteSetting. If you want to pass prop to a cell rendered component, you shouldn't be doing it in frameworkComponents, but rather you need to do it in the column definition like this:

useEffect(() =>
{
  let columns = [{headerName: '', cellRenderer: 'editButton', width: 90, editable: false, 
                  cellRendererParams: {
                    openAddConfigurationsWindow: openAddConfigurationsWindow,
                    onDeleteSetting: onDeleteSetting
                }},
                .. other columns
                ]

  setColumnDefinition(columns);
},[props.name]);

The columns with the cellRendererParams do gets recreated in the useEffect when the name changes, and then the component can access this params regularly via its props

CodeMonkey
  • 11,196
  • 30
  • 112
  • 203
  • What version of ag-grid are you on? – dsh Jan 13 '21 at 21:43
  • @dsh just installed it today - 24.1.0 – CodeMonkey Jan 14 '21 at 00:13
  • I don't think it is inherently impossible to pass props to a frameworkComponent. The issue was the reference was stale and not updating. I think you should be able to get around this with a getter such as `getFrameworkComponents(props)` that would dynamically compute on each render. But your solution achieves the same goal. – dsh Jan 29 '21 at 17:48
  • Even when I uses useMemo which basically implements a memoized getter like you suggested, it did not work – CodeMonkey Jan 29 '21 at 22:45