Can I use map inside the document to generate dynamic content?

[brunovalim02]

Hello, I'm trying to create a document that will take a JSON file with an array of objects that has some articles info on it and put it in a zip stream... The info is actually there, but I'm getting the error: "Error downloading file undefined: ReferenceError: article is not defined". This is happening in the backend.

Is it possible to create it this way?

Here is the code piece:

import React from 'react';
import { Document, Page, Text, View, StyleSheet, Font } from '@react-pdf/renderer';
import ReactPDF from '@react-pdf/renderer';
import axios from 'axios';
import yazl from 'yazl';


const zipFile = new yazl.ZipFile();

const ArticlePdf = (
  <Document>
    <Page size="A4">
      <Text style={styles.text}>
        Communication with the client
      </Text>
      {file.articles.map(article, i => (
          <View style={styles.body}>
            <View style={styles.row}>
              <Text style={styles.text} render={article.Subject} />
            </View>
            <View style={styles.row}>
              <Text style={styles.text} render={article.Body} />
            </View>
        </View>
      ))}
    </Page>
  </Document>
);
console.log('🚀 CREATING STREAM')
const streamCombinedArticles = await ReactPDF.renderToStream(<ArticlePdf />);
zipFile.addReadStream(streamCombinedArticles , "test");