I have this tableState.displayData
that I wanted to assign to a useState.
However, this would result in the error:
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
const [displayedData, setDisplayedData] = useState([]);
function handleTableChange(action, tableState) {
// console.log("handleTableChange:... ", tableState.displayData);
console.log(tableState.displayData, " tableState");
const totalAmount = calculateTotalSum(tableState.displayData);
setTotal(totalAmount);
setDisplayedData(tableState.displayData);
}
How can I assign the tableState.displayData
to a variable which I can use outside of the function
?
Since I’ll be using the data of the tableState.displayData
in this function to print it:
const handlePrint = () => {
console.log("clicked");
const doc = new jsPDF();
doc.text("Order details", 20, 10);
doc.autoTable({
head: [["Name", "House No. & Address", "Orders", "Total Amount"]],
body: [
["David", "david@example.com", "Sweden"],
["Castille", "castille@example.com", "Spain"]
// ...
]
});
doc.save("order.pdf");
};
I recreated this in code sandbox as well: mui-datatable reports - CodeSandbox