I’m creating a pdf using react-pdf library. When I pass direct data, like strings or numbers, everything is right. The issue is when I pass an array in props. This is the array called ‘books’:
[
{
"id": "63e6c5939c4408def54db54a",
"copies": 100,
"_id": "63f6386a35f07f585176e778"
},
{
"id": "63e6c5f59c4408def54db54e",
"copies": 100,
"_id": "63f6386a35f07f585176e779"
},
{
"id": "63e6c64f9c4408def54db552",
"copies": 150,
"_id": "63f6386a35f07f585176e77a"
},
{
"id": "63ecdc95105db694012e914d",
"copies": 100,
"_id": "63f6386a35f07f585176e77b"
}
]
So, here is the React component for rendering the pdf:
/* eslint-disable arrow-body-style */
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import {
Page,
Text,
View,
Document,
StyleSheet,
Image,
// Font,
} from '@react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'column',
backgroundColor: '#FFF',
margin: 25,
fontSize: 10,
// fontFamily: 'Roboto',
},
date: {
marginBottom: 20,
},
publisherData: {
flexDirection: 'row',
gap: 20,
},
publisherLogo: {
width: '100%',
},
header: {
fontSize: 14,
fontWeight: 'bold',
alignSelf: 'center',
marginTop: 20,
},
});
// Create Document Component
const EntryPdf = ({
publisher, logo, pubId, internalId, date, books,
}) => (
<Document>
<Page size="LETTER" style={styles.page}>
<Text style={styles.date}>{date}</Text>
<View style={styles.publisherData}>
<View style={{ width: '10%' }}>
<Image src={logo} style={styles.publisherLogo} />
</View>
<View>
<Text>{publisher.name}</Text>
<Text>{pubId.type}: {pubId.number}</Text>
<Text>Dirección: {publisher.address}</Text>
<Text>Teléfono: {publisher.phone}</Text>
<Text>Correo electrónico: {publisher.email}</Text>
</View>
</View>
<Text style={styles.header}>Ingreso de ejemplares</Text>
<Text>Ingreso No. {internalId}</Text>
{books && Array.isArray(books)
? books.map((book) => (
<View key={book.id}>
<Text>Id: {book.id}</Text>
<Text>Copies: {book.copies}</Text>
</View>
))
: null}
</Page>
</Document>
);
export default EntryPdf;
The problem is that on the pdf, only data from position 0 of the books array is being displayed.
What should I use for pdf render all elements in the array?
Thank you!