1st August 2023

Unique keys for child components

❗️Error that I ran into;

TypeError: Cannot read properties of undefined (reading 'setExtraStackFrame')
    at setCurrentlyValidatingElement$1 (react-jsx-runtime.development.js:872:1)
    at validateExplicitKey (react-jsx-runtime.development.js:984:1)
    at validateChildKeys (react-jsx-runtime.development.js:1013:1)
    at jsxWithValidation (react-jsx-runtime.development.js:1184:1)
    at jsxWithValidationDynamic (react-jsx-runtime.development.js:1209:1)
    at TestGallery (index.tsx:23:17)
    at ua (main.js:20:59048)
    at Va (main.js:20:68566)
    at Ku (main.js:20:112103)
    at jl (main.js:20:98402)

✅ Solution for this; Add a key prop whenever you are rendering child components in an array. You can also go a step further and edit your .eslintrc file to make sure that the errors such as these are reported in the text editor first before getting to the browser. This makes debugging easier

{
   "rules": {
      "react/jsx-key": "error"
   },

   ...

   "plugins": [
       ...,
       "react"
   ]
}