Demo to delete rows from React-data-grid component

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import ReactDataGrid from "react-data-grid"
//import { Button } from 'react-bootstrap'

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center",
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        { id: 1, junkInfo: "whatever" },
        { id: 2, junkInfo: "whatever" },
        { id: 3, junkInfo: "whatever" },
        { id: 4, junkInfo: "whatever" },
        { id: 5, junkInfo: "whatever" },
        { id: 6, junkInfo: "last drop of horchata" },
        { id: 9823476, junkInfo: "whatever" },
        { id: 32454, junkInfo: "whatever" },
        { id: 345, junkInfo: "whatever" },
      ],
      text: ''
    }
    this.deleteRows = this.deleteRows.bind(this);
  }

  deleteRows(id) {
    console.log(id);
    let list = this.state.list.slice()
    list = list.filter(row => row.id !== id)
    this.setState({ list })
  }

  render() {
    return (
        <div style={styles}>
          <ReactDataGrid
            columns={[
              {
                key: '$delete',
                getRowMetaData: (row) => row,
                formatter: ({ dependentValues }) => (
                  <span>
                  <a href="javascript:;" onClick={() => {
                    console.log(dependentValues);
                    this.deleteRows(dependentValues.id);
                    }}>Delete</a>
                  </span>
                ),
              },
              { key: "id", name: "id" },
              { key: "junkInfo", name: "junkInfo" },
            ]}
            rowGetter={i => this.state.list[i]}
          rowsCount={this.state.list.length}
            enableRowSelect ={true} />
        </div>
      );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));