Check the render method of ReactDatatable

[rizalamhadi]

when I navigated to another table and this error appear on the console

[ashvin27]

@rizalamhadi can please share some more details on this like screenshot of your browser console and code snippet if possible.

[rizalamhadi]

of course

my Code

`import React from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { withRouter } from "react-router-dom";
import { TransaksiMasukGetAPI } from "../../../../utils/APIHelpers";
import { removeUserFromSession, getPermission } from "../../../../utils/Common";
import Header from "../../../Header/Header";
import Sidebar from "../../../Sidebar/Sidebar";
import Footer from "../../../Footer/Footer";
import ReactDatatable from "@ashvin27/react-datatable";

class Masuk extends React.Component {
constructor(props) {
super(props);
if (sessionStorage.getItem("admin") !== null) {
if (sessionStorage.getItem("admin") !== "1") {
removeUserFromSession();
this.props.history.push("/login");
} else {
}
} else {
removeUserFromSession();
this.props.history.push("/login");
}
}

state = {
data: [],
errorFetch: "",
tblColumns: [
{
key: "noref",
text: "NOREF",
sortable: true,
},
{
key: "transaksikas_tanggal",
text: "Tanggal Transaksi",
sortable: true,
},
{
key: "transaksikas_nominal",
text: "Nominal Transaksi",
sortable: true,
},
{
key: "bukukas_nama",
text: "Buku Kas",
sortable: true,
},
{
key: "kategorikas_nama",
text: "Kategori Kas",
sortable: true,
},
{
key: "transaksikas_tipe",
text: "Tipe Transaksi",
sortable: true,
},
{
key: "action",
text: "Action",
class: "action",
width: 100,
align: "left",
sortable: false,
cell: (record) => {
return (
<React.Fragment>
<button
className="btn btn-primary btn-sm"
onClick={() => this.editRecord(record)}
style={{ marginRight: "5px" }}
>


<button
className="btn btn-danger btn-sm"
onClick={() => this.deleteRecord(record)}
>


</React.Fragment>
);
},
},
],
config: {
page_size: 10,
length_menu: [10, 20, 50],

  show_filter: true,
  show_pagination: true,
  pagination: "advance",
  button: {
    excel: false,
    print: true,
    csv: false,
  },
},

};
handleAddItem = () => {
this.props.history.push("/add-item");
};
componentDidMount() {
document.title = "Transaksi";
if (sessionStorage.getItem("token") !== null) {
const authHeaders = {
Authorization: "Bearer " + sessionStorage.getItem("token").toString(),
};
axios
.get(TransaksiMasukGetAPI(), { headers: authHeaders })
.then((response) => {
if (response.data.status) {
this.setState({
data: response.data.Transaksi,
});
console.log(this.state.data);
} else {
}
})
.catch((error) => {
this.setState({
errorFetch: "Item not found",
});
});
} else {
removeUserFromSession();
this.props.history.push("/login");
}
//console.log(tmp[0].flgIsAccess);
let permission = JSON.parse(getPermission());
let tmp = JSON.parse(permission);
if (tmp[0].Access !== 1) {
removeUserFromSession();
this.props.history.push("/login");
}
}
render() {
return (

Data Transaksi Pemasukkan

1. 
   Home
   


2. Pemasukkan

      <section className="content">
        <div className="container-fluid">
          <div className="alert alert-success alert-dismissible">
            <button
              type="button"
              className="close"
              data-dismiss="alert"
              aria-hidden="true"
            >
              &times;
            </button>
            <h5>
              <i className="icon fas fa-info"></i> Total Pemasukan Sosial
             
            </h5>
            <h2> Rp 100000</h2>
          
          </div>
          {/* <div className="row">
            <div className="col-12">
              <div className="card">
                <div className="card-header">
                  <h3 className="card-title">Data Transaksi</h3>
                </div>
                <div className="card-header">
                <Link to="/addMasuk">
                  <button
                    className="btn btn-primary"
                    
                  >
                     
                    <i className="fa fa-edit">Tambah Data</i>
                  
                    </button>
                    </Link>
                </div>

                <div className="card-body">
                  <ReactDatatable
                    className="table table-bordered table-striped custom-className"
                    config={this.state.config}
                    records={this.state.data}
                    columns={this.state.tblColumns}
                  />
                </div>
              </div>
            </div>
          </div> */}

          <div className="card card-info">
            <div className="card-header">
              <h3 className="card-title">
                <i className="fa fa-table"></i> Kas Sosial Masuk
              </h3>
            </div>

            <div className="card-body">
              <div className="table-responsive">
                <div>
                  <Link to="/addMasuk">
                    <button className="btn btn-primary">
                      <i className="fa fa-edit">Tambah Data</i>
                    </button>
                  </Link>
                </div>
                <br />

                <ReactDatatable
                  className="table table-bordered table-striped custom-className"
                  config={this.state.config}
                  records={this.state.data}
                  columns={this.state.tblColumns}
                />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <Footer />
  </div>
);

}
}

export default withRouter(Masuk);
`

[ashvin27]

Thanks for sharing details.

I think you not define key_column which used as key for every record by react.

Here is an example of defining key column:
http://react-datatable.in/keyColumn.html

import React, { Component } from 'react';
import ReactDatatable from '@ashvin27/react-datatable';
import records from 'data.json';

class KeyColumnExample extends Component {
constructor(props) {
super(props);
this.columns = [
{
key: "name",
text: "Name"
},
{
key: "address",
text: "Address"
},
{
key: "postcode",
text: "Postcode"
},
{
key: "rating",
text: "Rating"
},
{
key: "type_of_food",
text: "Type of Food"
}
];

    this.config = {
        key_column: 'id',
        page_size: 10,
        length_menu: [10, 20, 50],
        show_filter: true,
        show_pagination: false,
        button: {
            excel: false,
            print: false
        }
    }
    this.state = {
        records: records
    }
}

render() {
    return (
        <ReactDatatable
            config={this.config}
            records={this.state.records}
            columns={this.columns}/>
    );
}

}

[ashvin27]

If still you got same issue then update

[rizalamhadi]

thank you so much, FIX.