score:0

Accepted answer
import { useState, useCallback } from "react";
import {
    ResourceList,
    TextStyle,
    Stack,
    Thumbnail,
    Button,
    Modal,
    TextContainer,
    Layout,
} from "@shopify/polaris";
import { DisplayProduct } from "./DisplayProduct";

export function ProductsList({ data }) {
    const [open, setOpen] = useState(false);
    const [clickedItem, setClickedItem] = useState(false);
    const { prodData, setProdData } = useState(false);

    return (
        <Layout>
            <ResourceList // Defines your resource list component
                showHeader
                resourceName={{ singular: `Product`, plural: `Products` }}
                items={data.nodes}
                renderItem={(item) => {
                    const media = (
                        <Thumbnail
                            source={
                                item.images.edges[0] ? item.images.edges[0].node.originalSrc : ``
                            }
                            alt={item.images.edges[0] ? item.images.edges[0].node.altText : ``}
                        />
                    );
                    const price = item.variants.edges[0].node.price;
                    return (
                        <ResourceList.Item
                            id={item.id}
                            media={media}
                            accessibilityLabel={`View details for ${item.title}`}
                            onClick={() => {
                                setClickedItem(item.id);
                                setOpen(true);
                            }}
                            onCancel={() => setOpen(false)}
                        >
                            <Stack>
                                <Stack.Item fill>
                                    <h3>
                                        <TextStyle variation="strong">{item.title}</TextStyle>
                                    </h3>
                                </Stack.Item>
                                <Stack.Item>
                                    <p>${price}</p>
                                </Stack.Item>
                            </Stack>
                        </ResourceList.Item>
                    );
                }}
            />

            <Layout.Section> /* here is the important part. Conditionally load the modal and therefore, DisplayProduct. */
                {open ? (
                    <div style={{ height: `500px` }}>
                        <Modal
                            onClose={() => {
                                setOpen(false);
                            }}
                            title="Display Product"
                            open={open}
                            loading={false}
                            limitHeight={false}
                            sectioned={true}
                        >
                            <Modal.Section>
                                <TextContainer>
                                    <DisplayProduct productId={clickedItem} />
                                </TextContainer>
                            </Modal.Section>
                        </Modal>
                    </div>
                ) : (
                    ``
                )}
            </Layout.Section>
        </Layout>
    );
}

Related Query

More Query from same tag