When I am working on localhost or even with the build, everything works perfectly, but when the site is deployed I get this error: Cannot read properties of undefined (reading 'map'). I do not understand why. The site is developed with React and Redux.
{questionsAndAnswers.map((q, index) =>
<div key={q.id} className={"votre-question-card"} onClick={() => history.push(`/question/${q.id}`)}>
<h3>Votre question {index + 1}</h3>
<p>{dayjs(q.date).format("DD/MM/YYYY")}</p>
{q.reponses.map((r)=> {
if (r.state == 0) return <p className={"votre-question-card-message"}>1 nouveau message</p>;
else return null;
}
)}
</div>
)}
When I debug it, the first loop of the second map {q.reponses.map((r, index) => works, but the second loop one creates the bug Cannot read properties of undefined (reading 'map')
QuestionsAndAnswers returns a multidimensional array (containing Objects, and an array : reponses, what I am trying to return)
Array (5)
0 Object
content: ""
date: "2022-02-17 14:41:29"
dateClosed: "0000-00-00 00:00:00"
id: "10"
idUser: "3499"
listReponses: [] (0)
reponses: Array (2)
0 {id: "16", idQuestion: "10", idCareManager: "0", date: "2022-02-18 12:10:50", state: "1", …}
1 {id: "6", idQuestion: "10", idCareManager: "2", date: "2021-12-01 11:44:10", state: "1", …}
1 {id: "11", idUser: "3499", date: "2022-02-21 10:54:06", dateClosed: "0000-00-00 00:00:00", state: "0", …}
2 {id: "12", idUser: "3499", date: "2022-02-23 16:07:37", dateClosed: "0000-00-00 00:00:00", state: "0", …}
3 {id: "13", idUser: "3499", date: "2022-02-23 16:44:48", dateClosed: "0000-00-00 00:00:00", state: "0", …}
The mystery for me is that it works on localhost and the build, but not on production, with the same browser. Can somebody help me ??
The above error is occuring in q.reponses.map. To solve this you have to add below code:
{q.reponses && q.reponses.map((r) => {
if (r.state == 0)
return (
<p className={'votre-question-card-message'}>
1 nouveau message
</p>
);
else return null;
})}