I have created a .map
for my fetched products from shopify but for some reason, even though everything is working, I am getting this error message that says Each child in a list should have a unique "key" prop.
even though my <div>
has a key added to it. Here is my code below.
Products.jsx:
const fetchProducts = async () => {
const response = await fetch(`https://<MyShopifyStore>.myshopify.com/api/2024-10/graphql.json`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Storefront-Access-Token': ''
},
body: JSON.stringify({
query: `
{
products(first: 10) {
edges {
node {
title
descriptionHtml
images(first: 1) {
edges {
node {
src
}
}
}
}
}
}
}
`,
}),
});
const { data } = await response.json();
return data.products.edges;
};
const Products = () => {
const [productsList, setProductsList] = useState([]);
useEffect(() => {
const getProducts = async () => {
const productData = await fetchProducts();
setProductsList(productData)
};
getProducts();
}, []);
// Problem is below
return (
<div className="product-container">
{
productsList.map(({ node }) => (
<div key={node?.id}>
<h2>{node.title}</h2>
<div dangerouslySetInnerHTML={{ __html: node.descriptionHtml }} />
{node.images.edges.length > 0 && (
<img src={node.images.edges[0].node.src} alt={node.title} />
)}
</div>
))
}
</div>
)
}
export default Products
What am I doing wrong?