react pdf multi lines puts all lines in one line

Question

I am trying to use array below:

const test = [{"Task":"Coding","Hours":2,"Rate":72},
{"Task":"Testing","Hours":2,"Rate":72},
{"Task":"Meeting","Hours":2,"Rate":72},
{"Task":"Deployment","Hours":2,"Rate":72},
{"Task":"UAT","Hours":2,"Rate":72},
{"Task":"PROD","Hours":2,"Rate":72},
{"Task":"DEV","Hours":2,"Rate":72},
{"Task":"Yelling","Hours":2,"Rate":72},
{"Task":"New features","Hours":2,"Rate":72},
{"Task":"Unrelated","Hours":2,"Rate":72},
{"Task":"Admin","Hours":2,"Rate":72}];

and loop over the array to create a pdf using the react-pdf

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="B1" style={styles.page}>
     {test.map(lineitem => (
        <View style={styles.section}>
          <Text>{lineitem.Task},{lineitem.Hours},{lineitem.Rate}{`\n{""}`}</Text>
        </View>
      ))}
    </Page>
  </Document>
);

but lines are not on each line; I get everything on one line. What am I missing?

Answer 1

Changed the loop to loop the text component only as follows:

const MyDocument = () => (
  <Document>
    <Page size="B1" style={styles.page}>
        <View style={styles.section}>
          {test.map(lineitem => (<Text>{lineitem.Task}
                {lineitem.Hours}
                {lineitem.Rate}{'\n\n'}
          </Text>))}
        </View>
    </Page>
  </Document>
);