react rendering component dynamically inside a loop

Question

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

What is setExtraStackFrame in your code?

Surbhi Davara
– Surbhi Davara

2022-08-01 12:25:29 +00:00
Commented Aug 1, 2022 at 12:25 — Surbhi Davara
– Surbhi Davara, Commented Aug 1, 2022 at 12:25

Elliot · Accepted Answer · 2022-08-01 12:37:58Z

1

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

answered Aug 1, 2022 at 12:37

Elliot

1944 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sagar Kumar Over a year ago

thank you, i am learning react this helped me a lot

Raphael Pinel Over a year ago

Yes. It seems that now React 18 is throwing a TypeError: Cannot read properties of undefined (reading 'setExtraStackFrame') if you forget to add a key while looping through an array with map. The error used to be more descriptive, something like every prop needs a key in earlier versions of React

Waqar Alamgir Over a year ago

In map function It is probably: item, index

Collectives™ on Stack Overflow

react rendering component dynamically inside a loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related