Skip to content

Passing nested row into table causes getCollectionNode error #2746

Open
@pontageorge

Description

@pontageorge

🐛 Bug Report

I have a table where I want to render a number of <Skeleton /> components that would contain a Row with five Cells both imported from the react-stately package. The Skeleton animation component is dispalyed while the table data waits to be retrieved from the API. Obviously I would like to keep this in a separate file from the actual table file.

🤔 Expected Behavior

The rows should render normally while data from the API loads.

😯 Current Behavior

This error is returned.

Call Stack
 $f8429209754fda4b9142d514065f4$export$CollectionBuilder.getFullNode$
  app.2b21bd4ce9b6247290f9.bundle.js:31712:853
 l
  app.2b21bd4ce9b6247290f9.bundle.js:33546:5798
 Generator._invoke
  app.2b21bd4ce9b6247290f9.bundle.js:33546:5582
 Generator.next
  app.2b21bd4ce9b6247290f9.bundle.js:33546:6224
 Object.n
  app.2b21bd4ce9b6247290f9.bundle.js:20551:4865
 _callee13$
  app.2b21bd4ce9b6247290f9.bundle.js:31717:269
 l
  app.2b21bd4ce9b6247290f9.bundle.js:33546:5798
 Generator._invoke
  app.2b21bd4ce9b6247290f9.bundle.js:33546:5582
 Generator.next
  app.2b21bd4ce9b6247290f9.bundle.js:33546:6224
 Object.n
  app.2b21bd4ce9b6247290f9.bundle.js:20551:4865

💁 Possible Solution

🔦 Context

If I render the Skeleton Row directly into the table component without passing it from the Skeleton file it works just fine. What I can tell is that the map function from the table component doesn't detect the nested components and throws this error.

💻 Code Sample

Table component

<Table scrollRef={ref} >
                        <Table.Head>
                            <Table.Heading align="center" className="border-r border-gray-300">
                               Head 1
                            </Table.Heading>
                            <Table.Heading align="center" className="border-r border-gray-300">
                                Head 2
                            </Table.Heading>
                            <Table.Heading align="center" className="border-r border-gray-300">
                                Head 3
                            </Table.Heading>
                            <Table.Heading align="center" className="border-r border-gray-300">
                                Head 4
                            </Table.Heading>
                            <Table.Heading align="center">
                                Head 5
                            </Table.Heading>
                        </Table.Head>
                    <Table.Body>
                            networkStatus
                                && (new Array(50)
                                    .fill({})).map((item, index) => (
                                    /* eslint-disable-next-line react/no-array-index-key */
                                        <Skeleton key={index} />
                                ))
              </Table.Body>
</Table>

Skeleton component

import React from "react";

import {
    PageSkeleton, Table,
} from "components";

function Skeleton() {
    return (
        <Table.Row>
            {(new Array(5).fill({})).map((cell, i) => (
              <Table.Cell key={i} className="border-r border-gray-300">
                  <PageSkeleton.Text />
              </Table.Cell>
              ))}
        </Table.Row>
    );
}

Working verison

<Table scrollRef={ref} >
                        <Table.Head>
                            <Table.Heading align="center" className="border-r border-gray-300">
                               Head 1
                            </Table.Heading>
                            <Table.Heading align="center" className="border-r border-gray-300">
                                Head 2
                            </Table.Heading>
                            <Table.Heading align="center" className="border-r border-gray-300">
                                Head 3
                            </Table.Heading>
                            <Table.Heading align="center" className="border-r border-gray-300">
                                Head 4
                            </Table.Heading>
                            <Table.Heading align="center">
                                Head 5
                            </Table.Heading>
                        </Table.Head>
                    <Table.Body>
                            networkStatus
                                && (new Array(50)
                                    .fill({})).map((item, index) => (
                                    /* eslint-disable-next-line react/no-array-index-key */
                                        <Table.Row>
                                          {(new Array(5).fill({})).map((cell, i) => (
                                            <Table.Cell key={i} className="border-r border-gray-300">
                                                <PageSkeleton.Text />
                                            </Table.Cell>
                                          ))}
                                        </Table.Row>
                                 ))
                       </Table.Body>
</Table>

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions