When i use react-pdf/renderer Lib to display the dynamic data in Table i got Invalid 'Remarks' string child outside component

Question

  <Table>
        <TableRow >
          <TableHead>No</TableHead>
          <TableHead>VM name</TableHead>
          <TableHead>Sensor ID</TableHead>
          <TableHead>Locations</TableHead>
          <TableHead>Vibration limits criteria (10 Hz)</TableHead>
          <TableHead>Vibration limits criteria (80 Hz)</TableHead>
          <TableHead>Proposed alarm level</TableHead>
        </TableRow>

        {Object.values(reportdata).map((arr, index) => (
          <TableRow key={index} style={style.row}>
            <TableCell style={style.cell}>{index + 1}</TableCell>
            <TableCell style={style.cell}>{Array.from(new Set(arr.map((item) => item[headerItem])))}</TableCell>
            <TableCell style={style.cell}>{Array.from(new Set(arr.map((item) => item.sensor_id)))}</TableCell>
            <TableCell style={style.cell}>{Array.from(new Set(arr.map((item) => item.vibration_max_limit)))} mm/s</TableCell>
            <TableCell style={style.cell}>{Array.from(new Set(arr.map((item) => item.vibration_max_limit)))} mm/s</TableCell>
            <TableCell style={style.cell}>{Array.from(new Set(arr.map((item) => item.vibration_max_limit)))} mm/s</TableCell>
            <TableCell style={style.cell}>{Array.from(new Set(arr.map((item) => item.vibration_max_limit)))} mm/s</TableCell>
          </TableRow>
        ))}

      </Table>

When i try to pass props to one page to react pdf render page to display the dynamic data inside the react pdf render table i got issues with display the data .

Answer 1

The error says it all, I don't know why, but if you're passing dynamic data, the TableCell wants a <Text> component, so just update your example to:

import {Text} from "@react-pdf/renderer";
//...
{Object.values(reportdata).map((arr, index) => (
      <TableRow key={index} style={style.row}>
      <TableCell style={style.cell}><Text>{index + 1}</Text></TableCell>
      <TableCell style={style.cell}><Text>{Array.from(new Set(arr.map((item) => item[headerItem])))}</Text></TableCell>
      //.....etc