EmptyState not Displaying on an Empty ResourceList

Highlighted
New Member
2 0 0

Hi there,

I am trying to display an empty state while my resource list has no products. Here's the code:

    const [products, setProducts] = useState([]);

    const emptyStateMarkup = !products.length ? (
        <div>
            <TitleBar
                primaryAction={{
                    content: 'List products on App',
                    onAction: () => setOpen(true),
                }}
            />
            <ResourcePicker
                resourceType="Product"
                showVariants={false}
                open={open}
                onSelection={(resources) => handleSelection(resources)}
                onCancel={() => setOpen(false)}
            />
            <EmptyState
                heading="Unlock the collective creativity of Gen Z"
                action={{
                    content: 'Select products',
                    onAction: () => setOpen(true),
                }}
                secondaryAction={{
                    content: 'Learn more',
                    url: '', // document.location.href (replace index with how-it-works)
                }}
                image={img}
            >
                <p>
                    List your products on app and tap into our network of
                    creators to effortless sell your products.
                </p>
            </EmptyState>
        </div>
    ) : undefined;

    return (
        <Page title="Add Products">
            <Layout>
                <Layout.Section>
                    <Card>
                        <ResourceList
                            emptyState={emptyStateMarkup}
                            items={products}
                            renderItem={() => {}}
                            resourceName={{
                                singular: 'Product',
                                plural: 'Products',
                            }}
                        />
                    </Card>
                </Layout.Section>
            </Layout>
        </Page>
    );

For some reason it doesn't show the empty state at all. The only thing the page displays is the title "Add Products".

Can someone let me know if there is something wrong with my code? Thanks!

 

0 Likes