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.

If `this.content` is an array of elements, you can probably just use `{this.content}`. The `map()` is redundant — Phil, Apr 22 '22 at 01:57
At the top of the code, it is inited to an empty array, and then in buildPages, it pushes each page to the array. The removal of the map resulted in the same error. Is react not comfortable with rendering from a list? — Christina Stebbins, Apr 22 '22 at 01:59
I don't think you can instantiate class based components via `new`. You have to render them as part of JSX... ``. The constructor doesn't look right either. I think you should consult [the documentation](https://reactjs.org/docs/react-component.html) — Phil, Apr 22 '22 at 02:09

score 2 · Answer 1 · answered Apr 22 '22 at 02:18

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.

https://codesandbox.io/s/muddy-monad-zqwt73?file=/src/App.js code sandbox is up - the pages are having an issue getting in. Would love advice/help! — Christina Stebbins, Apr 22 '22 at 14:09

score 0 · Accepted Answer · answered May 03 '22 at 17:00

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!

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

2 Answers2