Home / Questions / 493077
Accepted
JoseMgz_Ux
Asked: 2022-03-27 07:00:02 +0800 CST 2022-03-27 07:00:02 +0800 CST

Avoid rendering component for each API call

  • 772

I am somewhat new to React and something is happening to me that I imagine is simple for someone experienced. I am filling a table with an api and then I download that table in a pdf file and each table on a different page.

I make more than one call to an api, so the information I bring is mapped into a component and then I render it, what is happening to me is that it is rendering 1 component for each call, that is, if I make 100 calls to the api, I it renders 100 components and I don't want that. What do I want? That I render only 1 component in the DOM but when I download that file it does come with all the tables (Components) of all the calls I made.

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;

javascript

1 Answers

  1. Best Answer

    You can try wrapping the component PDFExportin a divand manipulating its position with CSS, to hide the component's tables Registersin the UI:

    <div
   style={{
   position: 'fixed',
   left: '-1000px',
   bottom:'0px',
   top: 0,}}
>
      <PDFExport
        forcePageBreak=".page-break"
        fileName="Archivo.pdf"
        scale={0.9}
        paperSize="a4"
        keepTogether="Table"
        ref={pdfExportComponent}
      >
        <Registers />
      </PDFExport>
</div>

    This way of hiding content is documented .

    Now, if you only want to display the first table in the UI, you can build it using only the first element of the state InfoData. And place it just before the div it hides Registers.

    Hope this answer is helpful.

    • 1