fix(product-view): added unique key prop to product slider

This commit is contained in:
Tim Kapitein 2020-12-29 11:55:02 +01:00
parent 4e5a81d0d5
commit 2a3166f5d9
3 changed files with 8593 additions and 1 deletions

View File

@ -2,6 +2,7 @@ import { FC, useState } from 'react'
import cn from 'classnames' import cn from 'classnames'
import Image from 'next/image' import Image from 'next/image'
import { NextSeo } from 'next-seo' import { NextSeo } from 'next-seo'
import { nanoid } from 'nanoid'
import s from './ProductView.module.css' import s from './ProductView.module.css'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
@ -86,7 +87,7 @@ const ProductView: FC<Props> = ({ product }) => {
</div> </div>
<div className={s.sliderContainer}> <div className={s.sliderContainer}>
<ProductSlider> <ProductSlider key={nanoid()}>
{product.images.edges?.map((image, i) => ( {product.images.edges?.map((image, i) => (
<div key={image?.node.urlOriginal} className={s.imageContainer}> <div key={image?.node.urlOriginal} className={s.imageContainer}>
<Image <Image

8590
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -56,6 +56,7 @@
"keen-slider": "^5.2.4", "keen-slider": "^5.2.4",
"lodash.random": "^3.2.0", "lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1", "lodash.throttle": "^4.1.1",
"nanoid": "^3.1.20",
"next": "^10.0.3-canary.3", "next": "^10.0.3-canary.3",
"next-seo": "^4.11.0", "next-seo": "^4.11.0",
"next-themes": "^0.0.4", "next-themes": "^0.0.4",