React And Ag-grid: Populating Selectcelleditor Through Fetch Gives 'state' Of Undefined

I'm using AG-Grid to build an react application to display data from an api like a spreadsheet. Getting the data and showing it works fine, know I want to edit the data, or change

Solution 1:

Your problem seems more like a Javascript problem than anything to do with ag-grid. The this inside return object does not know anything about state variable defined globally

You have 2 ways to pass the dynamic values to your cell editor.

Solution 1: Get rid of the function in cellEditorParams and use it something like this -

cellEditorParams: { 
                values: this.state.selectData
        }

Solution 2: If you still want to use a function for cellEditorParams, you can separate out the function and pass the context using bind something like this.

testVals() {
    return {
      values : this.state.selectData
    }
  }

And in your colDef -

   {
        headerName: "MyListData", 
        field: "item", 
        editable: true, 
        cellEditor: "agSelectCellEditor",
        cellEditorParams: this.testVals.bind(this)
    }

Example from docs