Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

199
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!