score:2

Accepted answer

I am not completely sure but I think the problem lies here: <BlobProvider document={<MyDoc BookingData={booking} />}> and const MyDoc = ({ data }) =>. You have to destructure BookingData in MyDoc not data. I think the data in MyDoc is conflicting with data array.

Try this and let me know if it worked:

Change

const MyDoc = ({ data }) => (
  <Document>
    <Page>
      <Text>{data.name}</Text>
    </Page>
  </Document>
);

to

const MyDoc = ({ pageData }) => (
  <Document>
    <Page>
      <Text>{pageData.name}</Text>
    </Page>
  </Document>
);

And

<BlobProvider document={<MyDoc BookingData={booking} />}>

to

<BlobProvider document={<MyDoc pageData={booking} />}>

score:0

You pass to const MyDoc = ({ data }) => an array of object but when you call the MyDoc you pass an object of bookingdocument={<MyDoc BookingData={booking} /> try to fix this issue. Intead of passing an array of object pass only the first element and let us know if this fix your issue


Related Query

More Query from same tag