react functional component with ag grid cannot call parent function via context

Question

I am using ag-grid-react and ag-grid-community version 22.1.1. My app is written using functional components and hooks. I have a cellrenderer component that is attempting to call a handler within the parent component using the example found here. Is this a bug in ag-grid? I have been working on this application for over a year as I learn React, and this is my last major blocker so any help or a place to go to get that help would be greatly appreciated.

Cell Renderer Component

import React from 'react';
import Button from '../../button/button';

const RowButtonRenderer = props => {
    const editClickHandler = (props) => {
        let d = props.data;
        console.log(d);
        props.context.foo({d});
        //props.editClicked(props);
    }

    const deleteClickHandler = (props) => {
        props.deleteClicked(props);
    }

    return (<span>
        <Button classname={'rowbuttons'} onClick={() => { editClickHandler(props) }} caption={'Edit'} />&nbsp;
        <Button classname={'rowbuttons'} onClick={() => { deleteClickHandler(props) }} caption={'Delete'} />
    </span>);
};

export default RowButtonRenderer;

Parent Component

function Checking() {
  function foo(props) {
    let toggle = displayModal
    setNewData(props);
    setModalDisplay(!toggle);
  }

  const context = {componentParent: (props) => foo(props)};

  const gridOptions = (params) => {
    if (params.node.rowIndex % 2 === 0) {
      return { background: "#ACC0C6" };
    }
  };

  const frameworkComponents = {
    rowButtonRenderer: RowButtonRenderer,
  };

.
.
.

return (
    <>
          <AgGridReact
            getRowStyle={gridOptions}
            frameworkComponents={frameworkComponents}
            context = {context}
            columnDefs={columnDefinitions}
            rowData={rowData}
            headerHeight="50"
            rowClass="gridFont"
          ></AgGridReact>
    </>
  );
}

When clicking the edit button on a row, the debugger says that there is a function.

This error is received though:

Answer 1

You are passing the context object in this code section:

const context = {componentParent: (props) => foo(props)};

...

<AgGridReact
  context={context}
  {...}
></AgGridReact>

And in your cell renderer you call this

props.context.foo({d});

While it should be this

props.context.componentParent({d});

Also you can assign your callback directly since it receives the same parameter and returns the same result (if any)

function foo(props) {
  let toggle = displayModal
  setNewData(props);
  setModalDisplay(!toggle);
}
const context = {componentParent: foo};

You can also use this shorthand syntax from ES6 when assigning object property

function componentParent(props) {
  let toggle = displayModal
  setNewData(props);
  setModalDisplay(!toggle);
}
const context = {componentParent};

Live Demo