嗨，我是 React js 的新手，你能帮我把这个 class 组件转换为功能组件吗

Question

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;

Answer 1

 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;