I'm something new to React and something is happening to me that I imagine is simple for someone experienced. I'm filling a table with an api and then I download that table into a pdf file and each table into a different page.
I make more than one call to an api then the info that I bring the mapping in a component and then I render it, what is happening to me is that I am rendering 1 component for each call or so if I make 100 calls to the api it renders me 100 components and I do not want that. What do I want?, That I render only 1 component in the DOM but when I download that file if it comes with all the tables (Components) of all the calls I made.
It is rendering me a component in the DOM for each iteration in the array that has the API information.
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { Table, Button } from 'reactstrap';
import { PDFExport } from '@progress/kendo-react-pdf';
const styles = {
title: {
textAlign: 'center',
fontSize: '20px',
fontWeight: 'bold',
},
subtitle: {
textAlign: 'center',
background: '#67B71F',
color: 'white',
fontSize: '15px',
},
td: {
fontSize: '15px',
},
th: {
fontSize: '15px',
fontWeight: 'bold',
},
button: {
fontWeight: 'bold',
},
};
const options = {
headers: {
Authorization: process.env.REACT_APP_GETTOKENPDF,
},
};
const BlankPage = () => {
const pdfExportComponent = useRef(null);
const [InfoData, setInfoData] = useState([]);
useEffect(() => {
const apiURL = `${process.env.REACT_APP_URL_PDF}?conditional=idMerchant$in28::4193`;
axios
.get(`${apiURL}`, options)
.then(({ data }) => {
setInfoData(data.data);
})
.catch((error) => {
console.log('Alerta error: ', error.data);
});
}, []);
const Registers = () => (
<>
{InfoData.map((res) => (
<div className="card text-left " key={res.idMerchant}>
<PDFExport forcePageBreak=".page-break">
<Table className="table table-bordered">
{/* <caption style={styles.title}>INFORMACION DE REGISTRO</caption> */}
<tbody>
<tr>
<td style={styles.th} colSpan="1">
Nombre de la Cuenta:
</td>
<td style={styles.td}>{res.merchantName}</td>
<td style={styles.th}>ID:</td>
<td style={styles.td}>{res.idMerchant}</td>
</tr>
<tr>
<td style={styles.th}>Usuario que registro la cuenta:</td>
<td style={styles.td}>{res.officerUpdate}</td>
<td style={styles.th}>Fecha:</td>
<td style={styles.td}>{res.activationDate}</td>
</tr>
<tr>
<td style={styles.th}>Tipo de cuenta:</td>
<td style={styles.td}>{res.merchantType}</td>
</tr>
<tr>
<td style={styles.td} colSpan="4">
Los terminos y condiciones son aceptados por defecto al
momento del registro de la cuenta.
<a href="https://www.paguelofacil.com/terminos-y-condiciones">
<br />
https://www.paguelofacil.com/terminos-y-condiciones
</a>
</td>
</tr>
</tr>
</tbody>
</Table>
</PDFExport>
</div>
))}
</>
);
return (
<>
<PDFExport
forcePageBreak=".page-break"
fileName="Archivo.pdf"
scale={0.9}
paperSize="a4"
keepTogether="Table"
ref={pdfExportComponent}
>
<Registers />
</PDFExport>
<br />
<Button
className="k-button"
onClick={() => {
if (pdfExportComponent.current) {
pdfExportComponent.current.save();
}
}}
>
Exportar en PDF
</Button>
</>
);
};
export default BlankPage;
Top comments (0)