Avoid rendering component of each API call

Tags: react
Published: 2021-10-26 17:24:52

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;
```