Attempting to create a dynamic react pdf report generator based on params

Question

Code below: codesandbox.io/s/muddy-monad-zqwt73?file=/src/App.js

Currently, unsure why, the pages are not making it into the document and an empty Document is rendered.

I am unsure why. To me, this reads as I have created page elements, placed them in a list, and I should be able to map through and render all the pages to the Document. I am unsure why it is not working.

EDIT

As per suggestion, I changed the code to look as follows:

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    textAlign: 'left',
    fontSize: '30px',
    fontFamily: 'SF Pro Text',
    marginBottom: '25px',
    marginTop: '30px',
    marginLeft: '30px',
    justifyContent: 'space-evenly'
  }
})


class DavidPDF extends Component {
  constructor(name, params) {
    super(name, params);
    this.name = name;
    this.params = params;
    this.content = [];
  }

  buildPages() {
    console.log("building")
    for (let i = 0; i < this.params.length; i += 1) {
      console.log(i)
      let jsxPage = this.buildPage(this.params[i])
      this.content.push(jsxPage)
    }
  }

  buildPage(pageParams) {
    console.log("building indv page")
    const pageName = pageParams.pageName;
    const viewParams = pageParams.views;
    const pageViewParams = [];

    for (let i = 0; i < viewParams.length; i += 1) {
      let view = this.buildView(viewParams[i]);
      pageViewParams.push(view);
    }

    return (
      <Page>
        <View>{pageName}</View>
      </Page>
    )
  }

  buildView(viewParams) {
    if (viewParams.viewType == "headerText") {
      const text = viewParams.text;
      return (
        <View>
          <Text style={styles.header}>
            {text}
          </Text>
        </View>
      )
    }
  }
  render() {
    console.log("rendering")
    this.buildPages(this.params)
    console.log(this.content)
    return (
      <Document>
        {this.content}
      </Document>
    )
  }
}

function Test() {

  const pagesInfo = [
    {
      pageName: "Xtina's Page",
      views: [
        {
          viewType: "headerText",
          text: "Xtina's page"
        }
      ]
    }
  ]

  let wtf = ["hi2", "hi1", "hi3"]
  const wtfItems = wtf.map((item) => <div>{item}</div>)

  return (
    <div id="first">
      {wtf.map((item) => <div>{item}</div>)}
      <PDFViewer>
        <DavidPDF name="hello" params={pagesInfo} />
      </PDFViewer>
    </div>
  )
}

export default Test;

--- EDIT ----

Hurrah! That error was fixed. Now we have a new one - the pages will not go in.

Answer 1

Instead of approaching it this way, which does not play well, I have switched to generating a page with all my information of interest and adding print css so that a when a user prints (or I print to send to a user), the data is formatted nicely with break points for pages using only css and @media print. I would recommend this strategy to others and am happy to elaborate further if anyone wants!

Answer 2

There's a few issues, but if you can toss this into codesandbox would be happy to help. You're iterating over maps needlessly, not assigning keys to mapped elements, but the error you are seeing is most likely related to:

const pdf = new DavidPDF("hello", pagesInfo)

This is an instantiation of a class, which is an object, so the error makes sense.

Why not add it into render as so:

<DavidPdf name="hello" params={pageInfp} /> or whatever the props are?

Also, you can run buildPages on componentDidMount, and not worry about calling it from the parent.