DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Jose Moreno Gomez
Jose Moreno Gomez

Posted on

Avoid rendering component of each API call

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;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›