title: Create pdf client side using react-pdf/renderer library
body: <p>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..</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>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 (
      &lt;div&gt;
          &lt;Document&gt;
            &lt;Page size="A4" style={styles.page}&gt;
              &lt;View style={styles.section}&gt;
                &lt;Text&gt;Section #1&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.section}&gt;
                &lt;Text&gt;Section #2&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/Page&gt;
          &lt;/Document&gt;
    &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>I have tried this and this is working fine ..</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>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 = () =&gt; (
    &lt;div&gt;
      &lt;PDFDownloadLink document={&lt;App /&gt;} fileName="somename.pdf"&gt;
        {({ blob, url, loading, error }) =&gt; (loading ? 'Loading document...' : 'Download now!')}
      &lt;/PDFDownloadLink&gt;
    &lt;/div&gt;
  )
  
  ReactDOM.render(&lt;PDF /&gt;, document.getElementById('root'));
  serviceWorker.unregister();
  </code></pre>
  
  <p>I want to achieve this but getting the error..</p>
  
  <p><strong>DownloadButton.js</strong></p>
  
  <pre><code>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 = () =&gt; (
        &lt;div&gt;
          &lt;PDFDownloadLink document={&lt;App /&gt;} fileName="somename.pdf"&gt;
            {({ blob, url, loading, error }) =&gt; (loading ? 'Loading document...' : 'Download now!')}
          &lt;/PDFDownloadLink&gt;
        &lt;/div&gt;
      )
      return(
        &lt;div&gt;
          &lt;h4&gt;
            {&lt;GeneratePdf /&gt;}
          &lt;/h4&gt;
        &lt;/div&gt;
  
      );
    }
  }
  
  export default DownloadButton;
  </code></pre>