title: Loop through <tr> and <td> in React
body: <p>I'm trying to create a loop through my array and for every pass- create a table row. However, I'm getting an error <code>Expected Expression</code> and I'm not sure why. Does anyone have any ideas? Also, I'm not quite sure why a for loop acts as a function parameter either and an explanation would be amazing. Below is my code.</p>
  
  <pre><code>function FormTable(props){
  /**
   * props = allStations
   */
  return(
      &lt;table className="form__table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Departing Station&lt;/th&gt;
                  &lt;th&gt;Arriving Station&lt;/th&gt;
                  &lt;th colSpan={2}&gt;Departure Time&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              { /**
                  this self-executing invoked function (IIFE)
                  is going to loop through all stations and create
                  table data. The reason for this IIFE is because you cannot perform
                  stright loops in JSX? Gotta look into it more.
  
                  i = 1 b/c stationIndex[0] = "WarmToDaly" aka property name
              */}
              {( () =&gt; {
                  props.forEach((stationIndex) =&gt; {
                      &lt;tr className="form__table-row"&gt;
                          for(let i = 1; i &lt; this.stationIndex.length; i++){
                              for(let j = 0; j &lt; stationIndex[i][j].length; j++){
                              }   
                          }   
                      &lt;/tr&gt;
  
                  })
              })()}
  
  
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  )}
  </code></pre>