I am getting "TypeError: Cannot read property 'username' of undefined" whenever I try to access record.username

Question

{record.userId.username} it says userId bascially doesnt have uesrname even though I referenced a route "USER" in it which originally contains "username": MAKECOMMENT FUNCTION:

const makeComment = async (text,postId)=>{
    await fetch('/posts/' + post._id + '/comment',{
        method:"put",
        headers:{
            "Content-Type":"application/json",
        },
        body:JSON.stringify({
            postId,
            text
        })
    }).then(res=>res.json())
    .then(result=>{
        console.log(result)
        const newData = data.map(item=>{
          if(item._id==result._id){
              return result
          }else{
              return item
          }
       })
      setData(newData)
    }).catch(err=>{
        console.log(err)
    })
}

PORTION WHERE I ADD in javascript for diplay on application. This is where the problem seems to occur(I figured out using trial and error). {record.userId.username} it says userId bascially doesnt have uesrname even though I referenced a route "USER" in it which originally contains "username":

{
             post.comments.map(record=>{
              return(
                <h6 key={record._id} className="textInput"><span style={{fontWeight:"500"}}>{record.userId.username}</span> {record.text}</h6>
                )
              })
          }
          </div>
          <form onSubmit={(e)=>{
              e.preventDefault()
              makeComment(e.target[0].value, post._id)
          }}>
            <input type="text" placeholder="add a comment"/>  
          </form>

Answer 1

You need to check if your variable has values before displaying it. Try this:

post ? post.comments.map(record=>{
              return(
                <h6 key={record._id} className="textInput"><span style={{fontWeight:"500"}}>{record.userId.username}</span> {record.text}</h6>
                )
              }) : <></>

if your variable has any values, it will continue to map.