title: Need help structuring a double for loop with JSX tags on a two dimensional array
body: <p>I have a function for which I have written a two dimensional array which randomly assigns true/false values.  The data looks like this:</p>
  
  <pre><code>0: (3) [true, true, false]
  1: (3) [false, true, true]
  2: (3) [true, true, false]
  </code></pre>
  
  <p>I am trying to write a function which will render a Cell component with the prop of isLit to equal the corresponding true/false value from the nested array.  I am unable to structure it correctly, how can this be done?</p>
  
  <pre><code>const renderboard = () =&gt; {
        let myBoard = this.createBoard() //this return the above array
        let tr = '&lt;tr&gt;'
        let cell = '&lt;Cell isLit={'
        let cellc = '/&gt;'
        let trc = '&lt;/tr&gt;'
        for (let r = 0; r &lt; nrows; r++) {
          tr
            for (let c=0; c &lt; ncols; c++) {
              cell + myBoard[r][c] + cellc
            }
          trc
        }
      }
  </code></pre>