I am using expo and I want to convert a dynamic html into a pdf so that it can be printable.Here is my implementation
export const DynamicTable = () => { //my component
const { employeedata, business } = useContext(AuthContext); //some data i want from the context api
var table = ` //table i want to map dynamic data into
<div id="invoice-POS">
<center id="top">
<div class="logo"></div>
<div class="info">
<h2 id="info">${business?.name}</h2>
</div>
</center>
<div id="mid">
<div class="info">
<h2>Contact Info</h2>
<p>
<span>Address : street city, state 0000</span>
<span>Email : JohnDoe@gmail.com</span>
<span>Phone : 555-555-5555</span>
</p>
</div>
</div>
<div id="bot">
<div id="table">
<table>
<tr class="tabletitle">
<td class="item"><h2>Item</h2></td>
<td class="Hours"><h2>Qty</h2></td>
<td class="Rate"><h2>Sub Total</h2></td>
</tr>
</table>
</div>
</div>
</div>
`;
const receipthtml = `
<html>
<head>
</head>
<body>
${table} //table above
</body>
</html>
`;
console.log(receipthtml)
return receipthtml;
};
const print = async () => { //this function is called on click,,,it is what is in order the expo doc when you want to print something
await Print.printAsync({
html:DynamicTable(), //my component
base64:true,
useMarkupFormatter,
});
};
however when i run the code i get the following error
WARN Possible Unhandled Promise Rejection (id: 0):
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem
How do i fix this error?
