React-pdf: Conditionally add a Page to the Document

[dvenkatsagar]

Describe the bug
Basically Im trying to conditionally add a Page based on some array not being empty.

To Reproduce
1) Create a simple function that will generate the PDF Doc.

let generatePDF = (props) => {
   let {someArr} = props
   return (
      <Document>
         <Page>...</Page>
         {someArr.length !== 0 && <Page>
            {_.map(someArr, (v)=>{
               return (<Text>{v}</Text>)
            })}
        </Page>}
      </Document>
   )
}

2) Pass it in the PDF Viewer in render.

class Test extends React.Component{
   constructor(props){ ... }
   render() {
      let {someArr} = this.state
      return (
        <PDFDownloadLink document={generatePDF({someArr})}>
             Create PDF
        <PDFDownloadLink>
        <PDFViewer style={{width:'100%', height:'100%'}}>{generatePDF({someArr})}<PDFViewer>
      )
   }
}

The above code is just an abstract.
Note that the someArr can be made as an empty array via setState (like having a toggle button).
Also Note that the initial render the someArr is not empty.

Expected behavior
What I expected to happen is that when someArr is empty (by toggling the state). The second Page shouldnt render. but it still does.

Desktop (please complete the following information):

• OS: Windows 10 with WSL
• Browser Chrome
• React-pdf version v1.2.2
• React-pdf/styled v1.2.0

Please let me know if Im doing this the right way.

[diegomura]

Never tried something like this, but should work. PDFViewer does not receive a document prop, but you should pass the document as children. Can you test that and report the result?

[dvenkatsagar]

Oh sorry about the snippet, i actually tried it with the PDFDownloadLink and also did try the one that you mentioned. But the issue is there.

Edited the snippet above.

[diegomura]

Not sure what's happening on your end 😕
I just tried your snippet and worked perfectly:

const generatePDF = ({ someArr }) => {
  return (
    <Document>
      <Page>
        <Text>Page 1</Text>
      </Page>
      {someArr.length !== 0 && (
        <Page>
          {someArr.map(v => {
            return <Text key={v}>{v}</Text>
          })}
        </Page>
      )}
    </Document>
  )
}

class App extends React.Component {
  state = { someArr: [] }

  componentDidMount() {
    setInterval(() => {
      const arrayLength = this.state.someArr.length;
      if (arrayLength < 10) {
        this.setState({
          someArr: [...this.state.someArr, `${arrayLength}`]
        })
      }
    }, 2500)
  }

  render() {
    return (
      <PDFViewer style={{ width: '100%', height: '100vh' }}>{generatePDF({ someArr: this.state.someArr })}</PDFViewer>
    )
  }
}

I added some changes (the setInterval call) in order to mutate the state and test how it behaves when this happens. So if you don't see the extra page, maybe someArr is always empty, or truly no sure. But it's not a react-pdf issue. I recommend you to copy paste my snippet and test it, and check what's the difference between that and your case. I don't see any