React-PDF Table Using Borders Not Working As Expected

Question

I am trying to create a table in ReactPDF however only the table header is showing up, not sure what the trouble is I have tried a bunch of online solutions but can't comprehend why it is not making the row visible when item is being referenced properly and the necessary data is there inside it.

import React, { Fragment } from "react";
import { StyleSheet, View, Text, Font } from "@react-pdf/renderer";

const styles = StyleSheet.create({
  label: {
    fontFamily: "Open Sans",
    fontSize: 12,
    fontWeight: "bold",
  },
  section: {
    flexDirection: "column",
  },
  sectionRow: {
    flexDirection: "row",
    maxWidth: 520,
  },
  field: {
    flexDirection: "row",
    marginRight: 12,
  },
  labelValue: {
    fontFamily: "Open Sans",
    fontSize: 12,
    marginLeft: 4,
  },
  table: {
    marginRight: 12,
    flexDirection: "column",
  },
  tableHeader: {
    border: "1px solid #000000",
    flexDirection: "row",
    fontWeight: "bold",
  },
  tableHeaderItem: {
    border: "1px solid #000000",
    fontSize: 12,
    maxWidth: 180,
    padding: 12,
    fontWeight: "bold",
  },
  tableRow: {
    border: "1px solid #000000",
    flexDirection: "row",
  },
  tableRowItem: {
    border: "1px solid #000000",
    fontSize: 12,
    maxWidth: 180,
    padding: 12,
  },
});

export default function Section6({ data }) {
  const rows = data.section6DetailsArray.map((item, i) => {
    {
      console.log(i);
    }
    <View key={item.srNo.toString()} style={styles.tableRow}>
      <Text>item.srNo</Text>
      <Text style={styles.tableRowItem}>{item.srNo}</Text>
      <Text style={styles.tableRowItem}>{item.nameFatherNameCasteAddress}</Text>
      <Text style={styles.tableRowItem}>{item.type}</Text>
      <Text style={styles.tableRowItem}>{item.personType}</Text>
      <Text style={styles.tableRowItem}>{item.sex}</Text>
      <Text style={styles.tableRowItem}>{item.age}</Text>
      <Text style={styles.tableRowItem}>{item.occupation}</Text>
    </View>;
  });

  return (
    <View style={styles.section}>
      <View style={styles.sectionRow}>
        {/* Row 1 Col 1*/}
        <View style={styles.field}>
          <Text style={[styles.label, { fontFamily: "Open Sans" }]}>
            Details of known / suspected / unknown accused with full particulars
            (Attach separate sheet if necessary)
          </Text>
        </View>
      </View>

      <View style={styles.table}>
        <View style={styles.tableHeader}>
          <Text style={[styles.tableHeaderItem, { fontFamily: "Open Sans" }]}>
            Sl. No.
          </Text>
          <Text style={[styles.tableHeaderItem, { fontFamily: "Open Sans" }]}>
            Name / Father Name / Caste / Address
          </Text>
          <Text style={[styles.tableHeaderItem, { fontFamily: "Open Sans" }]}>
            Type
          </Text>
          <Text style={[styles.tableHeaderItem, { fontFamily: "Open Sans" }]}>
            Person Type
          </Text>
          <Text style={[styles.tableHeaderItem, { fontFamily: "Open Sans" }]}>
            Sex
          </Text>
          <Text style={[styles.tableHeaderItem, { fontFamily: "Open Sans" }]}>
            Age
          </Text>
          <Text style={[styles.tableHeaderItem, { fontFamily: "Open Sans" }]}>
            Occupation
          </Text>
        </View>
        <Fragment>{rows}</Fragment>
      </View>
    </View>
  );
}

Font.register({
  family: "Open Sans",
  fonts: [
    {
      src: "https://cdn.jsdelivr.net/npm/[email protected]/fonts/open-sans-regular.ttf",
    },
    {
      src: "https://cdn.jsdelivr.net/npm/[email protected]/fonts/open-sans-700.ttf",
      fontWeight: "bold",
    },
  ],
});

Here is what it shows: (I did check if overflow was an issue of it not being displayed, but that's not the case either)

enter image description here

Appreciate the help, thankyou!

Tried:

1. Making the rows a separate component
2. Trying to render a normal text item without looping through the array, nothing except the table header seems to be displayed
3. Checking for overflow

Expected Behavior: Rows exist

Answer 1

In Javascript, when using arrow functions, if the function body is wrapped in curly braces {}, you need to explicitly use the return keyword to return a value from the function.

For example:

const myFunction = () => {
    return someValue;
};

However, when the function body is wrapped in parentheses (), it implicitly returns the expression inside the parentheses without needing the return keyword.

For example:

const myFunction = () => (
    someValue
);

In React JSX, when you're mapping over an array to create an array of JSX elements, using parentheses instead of curly braces ensures that each iteration implicitly returns the JSX element. If you use curly braces, you need to use the return keyword explicitly.

So you can change your code to something like this:

const rows = data.section6DetailsArray.map((item, i) => (
    <View key={item.srNo.toString()} style={styles.tableRow}>
      <Text>item.srNo</Text>
      <Text style={styles.tableRowItem}>{item.srNo}</Text>
      <Text style={styles.tableRowItem}>{item.nameFatherNameCasteAddress}</Text>
      <Text style={styles.tableRowItem}>{item.type}</Text>
      <Text style={styles.tableRowItem}>{item.personType}</Text>
      <Text style={styles.tableRowItem}>{item.sex}</Text>
      <Text style={styles.tableRowItem}>{item.age}</Text>
      <Text style={styles.tableRowItem}>{item.occupation}</Text>
    </View>;
));