Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

205
Vistas
Hi i am new to React js can you help me convert this class component to functional component

hello this is the code below , how to convert this class component to functional component in React js. Hi i am new to React js can you help me convert this class component to functional component.i am trying to create a button which clicked should generate a pdf using jspdf and jspdf autotable

    import React from 'react';
    import jsPDF from "jspdf";
    import "jspdf-autotable";
    import './App.css';
    
    class App extends React. Component {
    
      constructor() {
        super();
        this.state = {
          people: [
            { name: "Keanu Reeves", profession: "Actor" },
            { name: "Lionel Messi", profession: "Football Player" },
            { name: "Cristiano Ronaldo", profession: "Football Player" },
            { name: "Jack Nicklaus", profession: "Golf Player" },
          ]
        }
      }
    
      exportPDF = () => {
        const unit = "pt";
        const size = "A4"; // Use A1, A2, A3 or A4
        const orientation = "portrait"; // portrait or landscape
    
        const marginLeft = 40;
        const doc = new jsPDF(orientation, unit, size);
    
        doc.setFontSize(15);
    
        const title = "My Awesome Report";
        const headers = [["NAME", "PROFESSION"]];
    
        const data = this.state.people.map(elt=> [elt.name, elt.profession]);
    
        let content = {
          startY: 50,
          head: headers,
          body: data
        };
    
        doc.text(title, marginLeft, 40);
        doc.autoTable(content);
        doc.save("report.pdf")
      }
    
      render() {
        return (
          <div>
            <button onClick={() => this.exportPDF()}>Generate Report</button>
          </div>
        );
      }
    }
    
    export default App;
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

 import React from 'react';
    import jsPDF from "jspdf";
    import "jspdf-autotable";
    import './App.css';
    
    const App =()=> {
     const [state,setState] =React.useState {
          people: [
            { name: "Keanu Reeves", profession: "Actor" },
            { name: "Lionel Messi", profession: "Football Player" },
            { name: "Cristiano Ronaldo", profession: "Football Player" },
            { name: "Jack Nicklaus", profession: "Golf Player" },
          ]
        }
    
      const exportPDF = () => {
        const unit = "pt";
        const size = "A4"; // Use A1, A2, A3 or A4
        const orientation = "portrait"; // portrait or landscape
    
        const marginLeft = 40;
        const doc = new jsPDF(orientation, unit, size);
    
        doc.setFontSize(15);
    
        const title = "My Awesome Report";
        const headers = [["NAME", "PROFESSION"]];
    
        const data = state?.people?.map(elt=> [elt.name, elt.profession]);
    
        let content = {
          startY: 50,
          head: headers,
          body: data
        };
    
        doc.text(title, marginLeft, 40);
        doc.autoTable(content);
        doc.save("report.pdf")
      }
    
        return (
          <div>
            <button onClick={exportPDF}>Generate Report</button>
          </div>
        );
      
    }
    
    export default App;
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda