title: How to make a table like UI in react native to render elements in it?
body: <p>My array as follows:</p>
  <pre><code>Array [
    Array [
      &quot;3&quot;,
      &quot;4&quot;,
      &quot;9&quot;,
      &quot;10&quot;,
      &quot;15&quot;,
      &quot;16&quot;,
      &quot;21&quot;,
      &quot;22&quot;,
      &quot;27&quot;,
      &quot;28&quot;,
      &quot;33&quot;,
      &quot;34&quot;,
    ],
    Array [
      &quot;2&quot;,
      &quot;5&quot;,
      &quot;8&quot;,
      &quot;11&quot;,
      &quot;14&quot;,
      &quot;17&quot;,
      &quot;20&quot;,
      &quot;23&quot;,
      &quot;26&quot;,
      &quot;29&quot;,
      &quot;32&quot;,
      &quot;35&quot;,
    ],
    Array [
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      &quot;36&quot;,
    ],
    Array [
      &quot;1&quot;,
      &quot;6&quot;,
      &quot;7&quot;,
      &quot;12&quot;,
      &quot;13&quot;,
      &quot;18&quot;,
      &quot;19&quot;,
      &quot;24&quot;,
      &quot;25&quot;,
      &quot;30&quot;,
      &quot;31&quot;,
      &quot;37&quot;,
    ],
  ]
  </code></pre>
  <p>So how to render the above array in react native like a matrix ? for example it has 4 arrays so the length of row will be 4 and inside each arrays there are about 12 elements so 12 columns, So there should be 4 rows and 12 columns - how to display this ?</p>
  <p>My function:</p>
  <pre><code>seats = () =&gt; {
        
  
          let arr2d = this.state.selectedSeatLayouts.reduce((r, {column, row, name }) =&gt; {
              if (!r[row]) r[row] = [];
              r[row][column] = name;
              return r;
          }, []);
          
            return (
                arr2d.map((o, i) =&gt; {
                    return(
                      &lt;View style={{ flexDirection: 'row' }} key={i}&gt;
                      {
                          o.map((e, i) =&gt;{
                              return(
                                  &lt;View 
                                  style={{flex: 1}}
                                  key={i}&gt;
                                      &lt;Text&gt;{e}&lt;/Text&gt;
                                  &lt;/View&gt;
                              )
                          })
                      }
                      &lt;/View&gt;
                    )
                })
            );
      }
  </code></pre>
  <p>From the above am getting an output as like:</p>
  <pre><code>3
  4
  9
  10
  15
  16
  21
  22
  27
  28
  33
  34
  2
  5
  8
  11
  14
  17
  20
  23
  26
  and so on...
  </code></pre>
  <p>But expected output is as follows,</p>
  <pre><code>1          2   3
  6          5   4
  7          8   9
  12         11  10
  13         14  15
  18         17  16
  19         20  21
  24         23  22
  25         26  27
  30         29  28
  31         32  33
  37   36    35  34
  </code></pre>
  <p>Please guide and help</p>