react rendering component dynamically inside a loop-CodePudding

trying to render component dinamically in a loop but it is giving me this error however directly sending the data in props working fine ongoingAssesements = assesmentData.filter((item) => item.assesmentStatus == "ongoing") newAssesements = assesmentData.filter((item) => item.assesmentStatus == "new") console.log(newAssesements) completedAssesements = assesmentData.filter((item) => item.assesmentStatus == "completed") below code is working fine

 <Assessments data={assesmentData[2]} />

but while looping it is giving error

{(completedAssesements && completedAssesements.length > 0) &&
            completedAssesements.map((item) =>
             <Assessments data={item} />
             
            )

 **error
Cannot read properties of undefined (reading 'setExtraStackFrame') **

CodePudding user response：

Key is missing.

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity - From React Docs https://reactjs.org/docs/lists-and-keys.html

{(completedAssesements && completedAssesements.length > 0) &&
            completedAssesements.map((index, item) =>
             <Assessments key={index} data={item} />
             
)}

You can refer to this issue: https://github.com/facebook/react/issues/20359