Create pdf client side using react-pdf/renderer library

Question

I am creating an react web application in which in have to create an download button which create pdf in the client side and download the pdf, I am using the react-pdf/renderer library for this task, I have successfully implemented the example of this, I have used the PDFDownloadLink Component of this library, when I am rendering this library directly into the ReactDOM.render, it was working fine, but when I am trying to use the same code inside the JSX element it is not working.. I am posting both of my code..

App.js

import React from 'react';
import {Document, Page,Text, StyleSheet, View} from '@react-pdf/renderer';

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

function App() {
  return (
    <div>
        <Document>
          <Page size="A4" style={styles.page}>
            <View style={styles.section}>
              <Text>Section #1</Text>
            </View>
            <View style={styles.section}>
              <Text>Section #2</Text>
            </View>
          </Page>
        </Document>
  </div>
  );
}

export default App;

I have tried this and this is working fine ..

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import DownloadButton from './DownloadButton';

const PDF = () => (
  <div>
    <PDFDownloadLink document={<App />} fileName="somename.pdf">
      {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
    </PDFDownloadLink>
  </div>
)

ReactDOM.render(<PDF />, document.getElementById('root'));
serviceWorker.unregister();

I want to achieve this but getting the error..

DownloadButton.js

import React from 'react';
import {Document, Page,Text, StyleSheet, View} from '@react-pdf/renderer';
import {PDFDownloadLink} from '@react-pdf/renderer';
import App from './App';

class DownloadButton extends React.Component {
  constructor() {
    super();

  }

  render(){
    const GeneratePdf = () => (
      <div>
        <PDFDownloadLink document={<App />} fileName="somename.pdf">
          {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
        </PDFDownloadLink>
      </div>
    )
    return(
      <div>
        <h4>
          {<GeneratePdf />}
        </h4>
      </div>

    );
  }
}

export default DownloadButton;

Answer 1

For me, this is working like a charm, you can give it a try.

import { PDFViewer, PDFDownloadLink, Document, Page } from "@react-pdf/renderer";

const resume = useMemo(
    () => (
      <Document
      author={name}
      title={name}
      subject="Document name"
    >
      <Page size="A4" wrap {...props}>
        ...
      </Page>
    </Document>
    ),
    [type, props]
);


<PDFDownloadLink document={resume} fileName={"resume.pdf"}>
    <Button size="sm" className="px-4">
      Download
    </Button>
</PDFDownloadLink>