CODEWITHSUNDEEP
reactjsreact-native
Sagar Kumar
Sagar Kumar

Reputation: 33

react rendering component dynamically inside a loop

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') **

Upvotes: 0

Views: 919

Answers (1)

Elliot
Elliot

Reputation: 194

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

Upvotes: 1

Related Questions