Enable to update my table after an edit with react data grid

Question

So I'm trying to use react-data-grid and I'm facing a problem with the cell editing. What I'm trying to do is to edit a cell and then update the cell to show the new value. I tried all the examples on the React data grid website and none of them seemed to work. I can edit the cell, but if I click on another cell or press enter, the cell goes back to its old value. I don't know why, but the onGridRowsUpdated never fire! I hope someone can help me with this and here's my code:

import React, { Component } from "react";
import ReactDataGrid from "react-data-grid";
import 'react-data-grid/dist/react-data-grid.css';
class DataGrid extends Component {

    state = {
        rows: this.props.rows.map(p => p),
    };
    rowGetter = (i) => {
        console.log(i)
        return (this.state.rows[i]);
    }
    onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
        console.log('hello')
        this.setState(state => {
            const rows = state.rows.slice();
            for (let i = fromRow; i <= toRow; i++) {
                rows[i] = { ...rows[i], ...updated };
            }
            return { rows };
        });
    };
    rowGetter = (rowIdx) => {
        return this.state.rows[rowIdx]
    }

    rowGetter = (i) => {
        return this.state.rows[i];
    }
    render() {
        return (
            <ReactDataGrid
                enableCellSelect={true}
                columns={this.props.columns}
                rows={this.state.rows}
                rowGetter={this.rowGetter}
                rowsCount={this.state.rows.length}
                onGridRowsUpdated={this.onGridRowsUpdated}
            />
        );
    }
} export default DataGrid;

Answer 1

The sample code on the project website does not work with the current install of this grid component. You will need to use

onRowsUpdate={onGridRowsUpdated}

and not

onGridRowsUpdated={ .... etc.. }.

I banged my head on this for a while too and realized that its a documentation issue.