title: react native: rendering with array.map
body: <p>I am trying to experiment with the array.map and I am not being able to see with the result. please help.</p>
  
  <p>I am trying to create a calendar like cells and the below code won't show any error or any contents.</p>
  
  <p>just iterating over two arrays to get the result. but it won't work. I am react native beginner</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, StyleSheet, Text } from 'react-native';
  
  export default class LearnMap extends React.Component {
      constructor(props) {    
          super(props);
        
        }
       
  
    render() {
      var rows = [0,1,2,3,4,5,6];
      var cols = [
        ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
        [1,2,3,4,5,6,7],
        [8,9,10,11,12,13,14],
        [15,16,17,18,19,20,21],
        [22,23,24,25,26,27,28],
        [29,30,31,1,2,3,4],
        [5,6,7,8,9,10,11],    
      ];
    
      return(&lt;View style={‌{flex:1,justifyContent:'center', alignItems:'center'}}&gt;
      { rows.map((row, rowIndex)=&gt;{ 
  
          &lt;View key={rowIndex} style={styles.row}&gt;         
        {   cols[row].map((col, colIndex)=&gt;{
          &lt;View key={colIndex} style={styles.cell}&gt;&lt;Text key={colIndex}&gt;{col.toString}&lt;/Text&gt;&lt;/View&gt;
          })
        }
          &lt;/View&gt;
  
      })
    }
      &lt;/View&gt; );
    }
  }
  const styles = StyleSheet.create({
    container: {
        
    },
    row:{
      flexDirection:'row',
      marginLeft:10,
      marginRight:10,    
    },
    cell:
    {
      flex:1, 
      backgroundColor:'pink', 
      alignItems:'center', 
      justifyContent:'center', 
      height:45, 
      borderWidth:1, borderColor:'black'
    }
  
  
  });
  </code></pre>