react populate modal from graphql - reactjs

Question

I have a list of products in a react component:
I am trying to display a modal when I click on the specific product that displays the product information through a graphql query. The query works fine. I'm just having problems displaying the modal.
Nothing happens when I click except my console.log statement. DisplayProduct never really gets loaded except when the page is loaded. How do I trigger a reload of DisplayProduct on click.
I'm pretty new to react, hence the issue...
ProductList.jsx
/* eslint-disable no-unused-vars */
import { useState, useCallback } from "react";
import { ResourceList, TextStyle, Stack, Thumbnail } from "#shopify/polaris";
import { Layout } from "#shopify/polaris";
import { DisplayProduct } from "./DisplayProduct";
export function ProductsList({ data }) {
const [open, setOpen] = useState(false);
const [clickedItem, setClickedItem] = useState(false);
const [active, setActive] = 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);
console.log(`itemId`, clickedItem);
}}
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>
<div style={{ height: `500px` }}>
<Modal
onClose={() => {
setActive(false);
setOpen(false);
console.log(`clicked close button: `, { active });
}}
title="Display Product"
open={active}
loading={false}
limitHeight={false}
sectioned={true}
show={active}
>
<Modal.Section>
<TextContainer>
<DisplayProduct productId={clickedItem} />
</TextContainer>
</Modal.Section>
</Modal>
</div>
</Layout.Section>
</Layout>
);
}
DisplayProduct.jsx
/* eslint-disable no-unused-vars */
import { useState, useCallback } from "react";
import { Banner, Button, Modal, TextContainer } from "#shopify/polaris";
import { gql, useQuery } from "#apollo/client";
import { Loading } from "#shopify/app-bridge-react";
const GET_PRODUCT_BY_ID = gql`
query getProductsById($id: ID!) {
product(id: $id) {
createdAt
defaultCursor
description
descriptionHtml
vendor
}
}
`;
export function DisplayProduct({ productId }) {
const [active, setActive] = useState(true);
const { loading, error, data, refetch } = useQuery(GET_PRODUCT_BY_ID, {
variables: { id: productId },
});
if (loading || typeof data === `undefined`) {
console.log(`loading`);
return <Loading />;
}
if (error) {
console.warn(error);
return (
<Banner status="critical">There was an issue loading products.</Banner>
);
}
console.log(`productId: `, productId);
console.log(`data: `, data);
return (
<p>
display our product here {data.id} and {productId}
</p>
);
}

Answer 1

New to react is right!
I needed a conditional display for the modal. If open is true, display the modal. When the modal is closed, the dom element is removed and then reloaded when open is set to true. I'm not sure if I can refine that down even further so it doesn't have to rebuild the modal each time a product is clicked
Here is the complete .jsx:
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>
);
}