'Error: Missing "key" prop for element in array react/jsx-key [duplicate]

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:

reactjs next.js

Solution 1:^[1]

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

Solution 2:^[2]

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.

Solution 3:^[3]

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;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Bahubali Ak
Solution 2
Solution 3	Daniel_Kamel

'Error: Missing "key" prop for element in array react/jsx-key [duplicate]

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]