React Giving Me: "TypeError: Cannot read properties of undefined" but will post anyway-CodePudding

jumping on a react project for my company but I am not super familiar with it. We have a bug where when a user posts something, we get this error but if you refresh, the post is there anyway. Any hints?

TypeError: Cannot read properties of undefined (reading 'comment') 
 src/Components/Main/Dispatch/DispatchDetails/DispatchDetails.tsx:1552
1549 | {   dispatch.comments &&
1550 |     dispatch.comments.map((story, index) =>
1551 |     <div key={index}>
> 1552 |         {story.comment.split('\n').map((remark, indexRem) => {
1553 |             if(remark === '') {
1554 |                 return <br key={indexRem} />;
1555 |             }

src/Components/Main/Dispatch/DispatchDetails/DispatchDetails.tsx:1550
 1547 | <h3 style={boldStyle}>Dispatch Comments:</h3>
 1548 | <div className="well-story">
 1549 |     {   dispatch.comments &&
 > 1550 |         dispatch.comments.map((story, index) =>
 1551 |         <div key={index}>
 1552 |             {story.comment.split('\n').map((remark, indexRem) => {
 1553 |                 if(remark === '') {

Code

         <div className="well-story">
              {   dispatch.comments &&
                  dispatch.comments.map((story, index) =>
         <div key={index}>
             {story.comment.split('\n').map((remark, indexRem) => {
             if(remark === '') {
             return <br key={indexRem} />;
             }
             return <p key={indexRem} className="the-remark">{remark}</p>;
              })
            }
              <p className="remark-datetime">
            {story.commentBy   ' | '   moment(story.commentDate, 'X').format('LLL')}
         </p>
         </div>
         ) }
        </div>

CodePudding user response：

Story object is empty in the second loop hence this error was there, because the first loop had story object fine, it processed fine, but the next object was empty, hence shown an error. Below code should fix your issue.

 <div className="well-story">
              {   dispatch.comments &&
                  dispatch.comments.map((story, index) =>
         <div key={index}>
             {story && story.comment && story.comment.split('\n').map((remark, indexRem) => {
             if(remark === '') {
             return <br key={indexRem} />;
             }
             return <p key={indexRem} className="the-remark">{remark}</p>;
              })
            }
              <p className="remark-datetime">
            {story.commentBy   ' | '   moment(story.commentDate, 'X').format('LLL')}
         </p>
         </div>
         ) }
        </div>