Update State of React Component from ag-grid Custom Renderer

Question

I need to update the state of React Component from Custom Rendered Component of Ag-grid. I hae tried to setState() in custom component but it says setState() is not a function

 // function to act as a class //https://www.ag-grid.com/javascript-grid-cell-rendering-components/ function editCellRenderer () {} // gets called once before the renderer is used editCellRenderer.prototype.init = function(params) { // create the cell this.eGui = document.createElement('div'); let row = params.data; let className = 'edit-btn-style'; this.eGui.innerHTML = '<span class="my-css-class"><div class="edit-button '+className+'" title="'+row.id+'">\\ <a target="_blank" href="URL='+row.id+'" >\\ <i class="fa fa-edit fa-1x not-selectable-element"></i></a></div> </span>'; }; // gets called once when grid ready to insert the element editCellRenderer.prototype.getGui = function() { return this.eGui; }; // gets called whenever the user gets the cell to refresh editCellRenderer.prototype.refresh = function(params) { // set value into cell again // return true to tell the grid we refreshed successfully return true; }; // gets called when the cell is removed from the grid editCellRenderer.prototype.destroy = function() { // do cleanup, remove event listener from button }; //This is the way i am initializing AgGridReact in Reactjs component. <AgGridReact columnDefs={this.state.columnDefs} defaultColDef={this.state.defaultColDef} rowData={jobs_reindexed} components={this.state.components} frameworkComponents={this.state.frameworkComponents} onGridReady={this.onGridReady} /> 

Answer 1

It is possible to pass context property in grid options. Then you can call parent method from cell renderer.

https://www.ag-grid.com/javascript-grid-context/

It will look like this:

class ParentComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            columnDefs: [
                {
                    headerName: '-',
                    field: '',
                    cellRendererFramework: CustomBtn
                }
            ],
        }

        this.handleStateChange = this.handleStateChange.bind(this)
    }

    handleStateChange(data) {
        /**
         * setState...
         */
    }

    /**
     * onGridReady..., onCellClicked etc.
     */

    render() {
        return (
            <div>
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.props.rowData}
                    onGridReady={this.onGridReady}
                    onCellClicked={this.handleOnCellClicked}
                    gridOptions={{
                        context: { componentParent: this }
                    }}
                />
            </div>
        )
    }
}

export default ParentComponent;


const CustomBtn = (props) => {
    const handleClick = (e) => {
        e.stopPropagation();
        props.context.componentParent.handleStateChange(props.data);
    };

    return (
        <div>
            <button onClick={handleClick}>
               Change State
            </button>
        </div>
    );
};