Open
Description
🐛 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>