Values present in console log but not in render

I’m certain there has to be something painfully simple and obvious that I’m just not seeing here… The following component pulls data through RTK Query and then maps out a table. The table is displaying correctly in terms of structure, and the values make it to the child Row component (the table expands to show additional fields, and I followed the Mui example for a collapsible table: https://mui.com/material-ui/react-table/#collapsible-table) as logged in the console. But the actual render of the data is showing undefined. I’ve used this approach so many times without issue, and I just cannot find anything off, but again, I’m sure it’s super obvious and its just my being lost in the weeds. Any help would be greatly appreciated.

function Row(data) {
    console.log("data ", data) //data successfully makes it here...

  const visitId = data.id;
  const [open, setOpen] = useState(false);

  const [deleteVisit] = useDeleteVisitMutation();

  const formatDate = (visitStart) => {
    const date = new Date(visitStart);
    let options = {
      year: "numeric",
      month: "numeric",
      day: "numeric",
    };
    return date.toLocaleDateString("en-US", options);
  };

  return (
    <>
      <TableRow sx={{ "& > *": { borderBottom: "unset" } }}>
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          {data?.user?.fullName} {console.log("user in data", data?.user?.fullName)} //undefined here (and all data values)
        </TableCell>
        <TableCell align="center">{formatDate(data?.visitStart)}</TableCell>
        <TableCell align="center">
            <span display='inline-flex'>
          <DirectEditVisit visitId={visitId} visit={data} />
          <IconButton onClick={() => deleteVisit(visitId)}>
            <DeleteIcon />
          </IconButton>
          </span>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <Box sx={{ margin: 1 }}>
              <Typography variant="h6" gutterBottom component="div">
                Progress Notes
              </Typography>
              <Table size="small" aria-label="notes">
                <TableHead>
                  <TableRow>
                    <TableCell>Goal</TableCell>
                    <TableCell>Notes</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {data?.goals?.map((goal) => (
                    <TableRow key={goal._id}>
                      <TableCell component="th" scope="row">
                        {goal.title}
                      </TableCell>
                      <TableCell>{goal.note}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </>
  );
}

const ProgNotesTab = () => {
  const { clientId } = useParams();

  const { data, isLoading, isSuccess } = useGetVisitsByClientIdQuery(clientId);

  let content;

  if (isLoading) {
    content = <CircularProgress />;
  } else if (isSuccess) {
    content = (
      <div>
        <Box sx={{ display: "flex", height: "100%", width: "100%" }}>
          <TableContainer component={Paper}>
            <Table aria-label="Progress Notes">
              <TableHead>
                <TableRow>
                  <TableCell />
                  <TableCell>Staff</TableCell>
                  <TableCell>Date</TableCell>
                  <TableCell>Edit/Delete</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {data && data.map((i) => (
                  <Row key={i._id} data={i} />
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </Box>
      </div>
    );
  }

  return (
    <div>
      <div>{content}</div>
    </div>
  );
};

export default ProgNotesTab;

The data in the console:

data: Object { client: "6205a8313fe12d6b4ec354c4", location: "Los Angeles Court", visitStart: "2022-04-13T18:00:53.000Z", … }

client: "6205a8313fe12d6b4ec354c4"

createdAt: "2022-04-13T18:23:15.712Z"

goals: Array(3) [ {…}, {…}, {…} ]

0: Object { title: "Cook", note: "Cook stuff", marked: true, _id: "631f6a7de4c79fe85dc94c3a" }

1: Object { title: "Budget", note: "Budget finances", marked: true, … }

2: Object { title: "Clean", note: "Clean stuff", marked: true, _id: "631f6a7de4c79fe85dc94c3c" }

length: 3

<prototype>: Array []

id: "62571513ec41c091181dd828"

location: "Los Angeles Court"

totalHours: 1

updatedAt: "2022-09-12T17:21:01.917Z"

user: Object { _id: "62194175bcd77d7f4bfa97ea", fullName: "Danny Trejo" }

visitEnd: "2022-04-13T19:00:00.000Z"

visitStart: "2022-04-13T18:00:53.000Z"

Answer

Since you pass prop name as data in line <Row key={i._id} data={i} />, you need to replace this line:

function Row(data) {

with:

function Row({ data }) {

You can take a look at this sandbox for a live working example of your case.

Advertisement

Answer