I hate warnings
Unanswered
Laysan Albatross posted this in #help-forum
Laysan AlbatrossOP
What do this 3 warnings mean? I don't get it:
Warning: Invalid ARIA attribute
Warning: [object Object]:
It's returned when rendering one of my pages.
Warning: Invalid ARIA attribute
ariaLabel. Did you mean aria-label?Warning: [object Object]:
key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)It's returned when rendering one of my pages.
'use client'
import { Image, Pagination } from "@nextui-org/react";
export default function shop() {
return(
<div>
<div className='border-b-2 text-center border-slate-700 h-fit'>
+++ BUY NOW**! +++
</div>
<div className='mt-[5%] flex justify-center'>
<div className='grid grid-cols-3 gap-8'>
<Image isZoomed width={240} alt='' src='https://cms.brnstc.de/product_images/435x596_retina/cpro/media/images/product/23/3/100083305512000_0_1678086991325.jpg' /> {/* TODO: add alt text */}
<Image isZoomed width={240} alt='' src='https://cms.brnstc.de/product_images/435x596_retina/cpro/media/images/product/23/3/100083305512000_0_1678086991325.jpg' /> {/* TODO: add alt text */}
<Image isZoomed width={240} alt='' src='https://cms.brnstc.de/product_images/435x596_retina/cpro/media/images/product/23/3/100083305512000_0_1678086991325.jpg' /> {/* TODO: add alt text */}
<Image isZoomed width={240} alt='' src='https://cms.brnstc.de/product_images/435x596_retina/cpro/media/images/product/23/3/100083305512000_0_1678086991325.jpg' /> {/* TODO: add alt text */}
<Image isZoomed width={240} alt='' src='https://cms.brnstc.de/product_images/435x596_retina/cpro/media/images/product/23/3/100083305512000_0_1678086991325.jpg' /> {/* TODO: add alt text */}
<Image isZoomed width={240} alt='' src='https://cms.brnstc.de/product_images/435x596_retina/cpro/media/images/product/23/3/100083305512000_0_1678086991325.jpg' /> {/* TODO: add alt text */}
</div>
</div>
<Pagination className='fixed bottom-8 min-w-[50%] mx-[40%]' boundaries={1} color='primary' initialPage={1} isCompact showControls siblings={1} size="md" total={10} variant="flat" />
</div>
)
}3 Replies
the first warning means you should use
aria-label instead of ariaLabel. and the second one means you are using a prop named key but this is invalid since it is a special prop from React, you need to use a different name. these errors aren't in this snippet you shared thoLaysan AlbatrossOP
Yeah they come from wherever. From pages that are located under node_modules/next
But they appear when rendering the page that I showed