title: Nested Map is not working properly on react template
body: <p>I am trying to mapping through three objects in react to render multiple categories on react template , Code doesn't give any error but its not showing any content on react web page.</p>
  <pre><code>return (
  
      &lt;div className=&quot;container pt-80&quot;&gt;
          &lt;center&gt;Category Grouping&lt;/center&gt;
          {categories.map((cate,key)=&gt;{
  
              subCategories.map(subCate=&gt;{
  
                  if(subCate.category === cate.id){
  
                      pType.map(ptype=&gt;{
  
                          if (ptype.category === subCate.id){
  
                              console.log(&quot;Category : &quot;,cate.category)
                              console.log(&quot;Sub Category : &quot;,subCate.subCatName)
                              console.log(&quot;Product Type : &quot;,ptype.ptype)
                              
                              console.log(&quot;*******************************************&quot;)
                              
                              return(
                                  &lt;Fragment&gt;
                                      &lt;h1 style={{marginLeft:&quot;30px&quot;}}&gt;{cate.category}&lt;/h1&gt;
                                      &lt;h1 style={{marginLeft:&quot;60px&quot;}}&gt;{subCate.subCatName}&lt;/h1&gt;
                                      &lt;h1 style={{marginLeft:&quot;120px&quot;}}&gt;{ptype.ptype}&lt;/h1&gt;
                                  &lt;/Fragment&gt;
                              )
                          }
                      })
                  }
              })
          })}
      &lt;/div&gt;
      
  )
  </code></pre>
  <p>Its printing the correct values in console :</p>
  <p><a href="https://i.stack.imgur.com/SYhYq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SYhYq.png" alt="enter image description here" /></a></p>