Can't select row for removal in React AG Grid

Question

In React and based on the docs [here][1], I'm trying to select an AG Grid row for removal with this code:

    class MyComponent extends Component {
      constructor(props) {
        this.state={rowSelection: 'single'}
      }

      onGridReady(params) {
        this.gridApi = params.api
        this.columnApi = params.columnApi
      }

      onRemoveSelected() {
        const selectedData = this.gridApi.getSelectedRows();
        const res = this.gridApi.updateRowData({ remove: selectedData })
      }
    }

    render() {
      return(
        <div>
          <button onClick={this.onRemoveSelected.bind(this)}>Remove Selected</button>
          <AgGridReact
            id="myGrid"
            {...gridOptions}
            onGridReady={this.onGridReady}
            rowSelection={this.state.rowSelection}
           />
          </div>
      )
    }

But the row is not selecting. Also, using different variations of the code, there are times were I get this console warning:

cannot select node until id for node is known 

Thanks in advance [1]: https://www.ag-grid.com/javascript-grid-data-update/

Answer 1

Try to loop through the Nodes and add an id to each Node. I don't believe this is the most optimal solution, but it works.

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    let idSequence = 0;
    this.gridApi.forEachNode( function(rowNode, index) {
      rowNode.id = idSequence++;
    });
  }

Answer 2

Ag-Grid Grid Properties Reference
Ag-Grid has a prop called gridOptions that takes an object. You can find what kind of keys you can put in this object from the reference above, but the key you're looking for is getRowNodeId.

Example (assumes your row data contains a key called id):

<AgGridReact
    gridOptions={{
        getRowNodeId : item => item.id
    }}
    {...gridOptions}
/>
...