Data does't appear in datatables - reactjs

Question

Data tidak tampil pada datatables
import React, { Component } from 'react';
import Linkify from 'react-linkify';
import './CobaData.css';
import './css/jquery.dataTables.css';
const $ = require('jquery')
$.Datatable = require('datatables.net')
export default class CobaData extends Component {
constructor(props) {
super(props);
}
render() {
let data = this.props.data;
let printData = data;
console.log(printData);
let table = $('#exc').dataTable(
{
data: printData,
columns: [
{ title: "ID" },
{ title: "Nama" },
{ title: "Nomor KTP" },
{ title: "Nomor HP" },
],
searchable: false,
orderable: false,
targets: 0,
}
);
console.log(table);
return (
<div>
<table className="display" width="100%" id="exc" >
</table>
</div>
);
}
}
data can't display datatables, when in console.log(printData) can be read in 'console'
before I used a normal table can be read on the table, but when using datatables on the data can not be read on the table

Answer 1

Using jQuery in a react app is not a good approach.
Instead I would recommend you to use react-data-table-component.
And then your Component would be like this:
import React, { Component } from 'react';
import DataTable from 'react-data-table-component';
import Linkify from 'react-linkify';
import './CobaData.css';
const columns = [
{
name: 'ID',
selector: 'id_karyawan'
},
{
name: 'Nama',
selector: 'nama'
},
{
name: 'Nomor KTP',
selector: 'KTP'
},
{
name: 'Nomor HP',
selector: 'no_hp'
},
];
export default class CobaData extends Component {
render() {
let data = this.props.data;
return (
<DataTable
title="Arnold Movies"
columns={columns}
data={data}
/>
);
}
}