I created one table that has some features every single row can generate a pdf and download by using render-pdf npm, I want to show when the user clicks the download button pdf preview on a new page, it working but the issues rendering in the method they pass all data row data as props on page load it affects the page it's time sometimes, and page crashed I tried on single click send particular data in props it not working fine, Please Helps any Idea it very full for me.
Thanks for help
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { Container } from '@material-ui/core';
import { Text, Page, Document, BlobProvider } from '@react-pdf/renderer';
const data = [
{
id: 5,
name: 'test',
email: 'test@gmail.com'
}
];
const MyDoc = ({ data }) => (
<Document>
<Page>
<Text>{data.name}</Text>
</Page>
</Document>
);
export default function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<Container>
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell> Name</TableCell>
<TableCell>Email</TableCell>
<TableCell>Pdf</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(booking => (
<TableRow key={booking.id}>
<TableCell>{booking.id}</TableCell>
<TableCell>{booking.name}</TableCell>
<TableCell>{booking.email}</TableCell>
<TableCell>
<BlobProvider document={<MyDoc BookingData={booking} />}>
{({ url }) => (
<a href={url} target="_blank">
Open in new tab
</a>
)}
</BlobProvider>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Container>
</div>
);
}
I am not completely sure but I think the problem lies here: <BlobProvider document={<MyDoc BookingData={booking} />}> and const MyDoc = ({ data }) =>. You have to destructure BookingData in MyDoc not data. I think the data in MyDoc is conflicting with data array.
Try this and let me know if it worked:
Change
const MyDoc = ({ data }) => (
<Document>
<Page>
<Text>{data.name}</Text>
</Page>
</Document>
);
to
const MyDoc = ({ pageData }) => (
<Document>
<Page>
<Text>{pageData.name}</Text>
</Page>
</Document>
);
And
<BlobProvider document={<MyDoc BookingData={booking} />}>
to
<BlobProvider document={<MyDoc pageData={booking} />}>
You pass to const MyDoc = ({ data }) => an array of object but when you call the MyDoc you pass an object of bookingdocument={<MyDoc BookingData={booking} /> try to fix this issue.
Intead of passing an array of object pass only the first element and let us know if this fix your issue