DEV Community: Jose Moreno Gomez

Avoid rendering component of each API call

Jose Moreno Gomez — Tue, 26 Oct 2021 17:24:52 +0000

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;

Download more than 1 PDF

Jose Moreno Gomez — Mon, 25 Oct 2021 16:14:55 +0000

I make a query to an api where I bring 1 json. The data from that json I pass to the table in jsx using Hooks.

When I press the button with the exportPDF function it converts the html table to a PDF file.

For now that's fine but it's only 1 record (ID) idMerchant::27675 How do I do if I want to bring 2 or more records, or how do I get 1 pdf of each record to be downloaded?idMerchant$in28::4193 (With this syntax I bring registers 28 and 4193) I can do it like this or in the way that I can solve it.For example: Try to create an array with 2 IDs const arrayIDs = ['::28', '::4193'];And go through them in a forEach and inside the forEach the axios request if I downloaded 2 pdfs but blank or if it was not blank, only pdfs with the last ID.

Delete table because it is too large

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Table, Button } from 'reactstrap';
import { savePDF } from '@progress/kendo-react-pdf';

const styles = {
  title: {
    textAlign: 'center',
    fontSize: '30px',
    fontWeight: 'bold',
  },
  subtitle: {
    textAlign: 'center',
    background: '#67B71F',
    color: 'white',
  },
  td: {
    fontSize: '15px',
  },
  th: {
    fontSize: '15px',
    fontWeight: 'bold',
  },
  button: {
    fontWeight: 'bold',
  },
};
const options = {
  headers: {
    Authorization: process.env.REACT_APP_GETTOKENPDF,
  },
};

const BlankPage = () => {
  const [legalName, setLegalName] = useState('');
  const [merchantName, setMechantName] = useState('');
  const [Id, setId] = useState('');
  const [officerUpdate, setofficerUpdate] = useState('');
  const [activationDate, setActivationDate] = useState('');
  const [merchantType, setMerchantType] = useState('');
  const [email, setEmail] = useState('');
  const [address, setAddress] = useState('');
  const [phone, setPhone] = useState('');
  const [ruc, setRuc] = useState('');
  const [legalRp, setLegalRp] = useState('');
  const [legalTypeId, setLegalTypeId] = useState('');
  const [legalIdNum, setLegalIdNum] = useState('');
  const [legalRepCountry, setLegalRepCountry] = useState('');
  const [NoMCC, setNoMCC] = useState(0);
  const [domain, setDomain] = useState('');
  const [socialRed, setSocialRed] = useState('');
  const [activity, setActivity] = useState('');

  const arrayIDs = ['::28', '::4193'];
  // const cantidad = arrayIDs.length;

  const exportPDF = () => {
    const element = document.getElementById('content');
    savePDF(element, {
      fileName: `Informe de registro-${legalName}.pdf`,
      paperSize: 'A4',
      scale: 0.8,
      keepTogether: '.card',
    });
  };


  useEffect(() => {
    const apiURL = `${process.env.REACT_APP_URL_PDF}?filter=idMerchant::27675`;
// const apiURL = `${process.env.REACT_APP_URL_PDF}?conditional=idMerchant$in28::4193`;

    axios
      .get(`${apiURL}`, options)

      .then(({ data }) => {
        data.data.forEach((response) => {
          setActivity(response.about);
          setLegalName(response.legalName);
          setMechantName(response.merchantName);
          setId(response.idMerchant);
          setofficerUpdate(response.officerUpdate);
          setActivationDate(response.activationDate);
          setMerchantType(response.merchantType);
          setEmail(response.email);
          setAddress(response.address);
          setPhone(response.phone);
          setRuc(response.ruc);
          setLegalRp(response.legalRep);
          setLegalTypeId(response.legalRepIdType);
          setLegalIdNum(response.legalrepIdNum);
          setLegalRepCountry(response.legalRepCountry);
          setNoMCC(response.mcc);
          setDomain(response.additionalAttributes.webPage);
          setSocialRed(response.additionalAttributes.redSocial);
        });
      })
      .catch((error) => {
        // eslint-disable-next-line no-alert
        console.log('Alerta error: ', error.data);
      });
  }, []);


  return (
    <>
      <div id="content" className="card text-left ">
        <caption style={styles.title}>INFORMACION DE REGISTRO</caption>
        <Table className="table table-bordered">
          ...
        </Table>
      </div>
      <br />
      <Button color="info" size="lg" style={styles.button} onClick={exportPDF}>
        Download
      </Button>
      <br />
    </>
  );
};

export default BlankPage;

code

Jose Moreno Gomez — Wed, 20 Oct 2021 21:56:31 +0000

import logo from "./logo.svg";
import "./App.css";
import React from "react";
import { Document, Page, Text, View, StyleSheet } from "@react-pdf/renderer";

// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: "row",
backgroundColor: "#E4E4E4",
},
section: {
margin: 10,
padding: 10,
flexGrow: 1,
},
});

// Create Document Component
const MyDocument = () => (

Section #1

Section #2

);

export default MyDocument;

Render HTML in a component made with @react-pdf/renderer

Jose Moreno Gomez — Wed, 20 Oct 2021 21:47:13 +0000

A component made with react-pdf in case it does not support html then I want to create a table with data but that is made with react-pdf and I do not know how to do it.
This is the example in npm =>