New to Firestore, React, and Redux. I have a document which contains a map called "questions" (see yellow highlight in Image 1 below). In this map there are question objects (underlined red 1, 2, 3 in Image 1). I was trying to dynamically deconstruct the questions map array, passing the data of each quesiton into a display component (to make it appear as a card on the Users Interface).
My code
Results in an error stating that "questions.map is not a function".
const QuestionList = ({questions}) => { <------ Passed the "questions" map object into this react component.
console.log(questions); <----- Output of console log is found in Image 2. It appears to be correct.
return(
<div className='custom-question-list section'>
{ questions.map(question => { <------ Error states that questions.map is not a function.
console.log(question);
console.log(question.numberOfQuestions);
return (
<div key={question.id}>
<QuestionSummary question={question}/> <----- Simply trying to take each individual question object and pass it into this QuestionSummary component (which helps display the content of that question object.
</div>
)
})
}
</div>
)
}
IMAGE 1
IMAGE 2
FOUND A SOLUTION Thanks to Doug's response, I was able to find a solution. However, for future readers who might run into this problem, I have included the code that resolves the problem I was experiencing. You need to map over using the "Object.entries".
return(
<div className='custom-question-list section'>
{ Object.entries(questions).map(([key, question]) => (
<div key={key}>
<QuestionSummary question={question}/>
</div>
))
}
</div>
)
