Error: Missing "key" prop for element in array react/jsx-key-CodePudding

When I try to build my next.js app, I'm receiving the following error: Error: Missing "key" prop for element in array react/jsx-key in every component:

I only use the map function once in my project and did put the key prop:

And I cannot understand why I'm getting that error, not that at I also got the following error at the end:

CodePudding user response：

Pass key={index} prop to RightPackage instead of sending to div

CodePudding user response：

It seems, you need to pass key props in the RightPackage component.

{rightPackages.map((item, index) => (
  <div key={`right-package${index`}>
    <RightPackage key={index.toString()} />
</div>

) )}

or you can pass if item is having any unique id.

CodePudding user response：

It turned out that the solution was to disable eslint, This can be done by going to next.config.js file and adding the following:

eslint: {
        ignoreDuringBuilds: true,
    },

like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    eslint: {
        ignoreDuringBuilds: true,
    },
};

module.exports = nextConfig;