Sorry if this is too React-specific but maybe someone has seen this behavior before.
I am trying to shift my (datatables-heavy) website to React - I got everything to work so far, except the following.
I am adding custom buttons to last column of every datatables row (in below case, column 10) with the following columnDefs:
{
"targets": [10],
createdCell: (td, cellData, rowData, row, col) => {
ReactDOM.render(
<button onClick={props.handleReportClick}></button>
, td);
}
})
The handler function (passed as props) is defined as follows:
const handleReportClick = (e) =>{
e.stopPropagation();
console.log(dataTable);
};
[The dataTable is a state variable where I store my dataTable and every other function that I have logs out dataTable as a full object]
The button shows up fine and triggers the handler function but I get 'empty string' logged out, which means it is probably just logging out the initial state of the dataTable but not the current state. I tried using useRef which did not help.
(If I replace the onClick function to just string name of the handler function (like I used to in my framework-less site then it doesn't work at all)
Any help would be appreciated.