Next.js Discord

Discord Forum

I hate warnings

Unanswered
Laysan Albatross posted this in #help-forum
Open in Discord
Laysan AlbatrossOP
What do this 3 warnings mean? I don't get it:

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 tho
Laysan 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