[Solved] TypeError: Cannot read properties of undefined (reading 'map') React JS

Problem:

Recently, we working on a SPA(Single page application), we used React to develop this application. But when we try to build our application we face that getting error -

 "TypeError: Cannot read properties of undefined (reading 'map') React JS"

Solution:

We found that this problem happens because the mapping object is empty. So at first, we need to check the mapping object is empty or not before mapping. We can check it three different ways.

First:

{
  if(myArrayOfData) {
    myArrayOfData.map(
      // rest of the codes ...
    )
  }
}

Second:

{
  myArrayOfData?.map(
    // rest of the codes ...
  )
}

Third:

{
  if(myArrayOfData) {
    if(myArrayOfData.length > 0) {
     myArrayOfData.map(
        // rest of the codes ...
     )
    }
  }
}

Finally

{
  if(myArrayOfData?.length > 0) {
     myArrayOfData.map(
        // rest of the codes ...
     )
  }
}

Thanks for reading the article. If you face any problem please comment below.