title: How to display arrays in an JSX column, NOT a row
body: <p>I am working on a react app. I am receiving data in arrays from the back end. For example, I am receiving an array of titles, another array of prices, etc... I have a total of four arrays. I set those arrays to state, then I want to render them to the web page in a table. The problem is that the  tag puts any data all in a row. I am wanting to display each array in its separate column. However, after mapping through the array, the only option I've been able to discover is to put them in the table row. Here is my current solution:</p>
  
  <pre><code> &lt;table&gt;
                  &lt;tbody className="column"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Title&lt;/th&gt;
                      &lt;/tr&gt;
                      {this.state.cartTitles.map((item =&gt; 
                          &lt;tr&gt;&lt;td key={item}&gt;{item}&lt;/td&gt;&lt;/tr&gt;    
                      ))}
                      &lt;/tbody&gt;
                      &lt;tbody className="column1"&gt;
                          &lt;th&gt;Price&lt;/th&gt;
                      {this.state.cartPrice.map((item =&gt;
                         &lt;tr&gt;&lt;td key={item}&gt;{item}&lt;/td&gt;&lt;/tr&gt;
                      ))}
                      &lt;/tbody&gt;
                      &lt;tbody className="column2"&gt;
                           &lt;th&gt;Quantity&lt;/th&gt;
                      {this.state.cartQuantity.map((item =&gt;
                         &lt;tr&gt;&lt;td key={item}&gt;{item}&lt;/td&gt;&lt;/tr&gt;
                      ))}
                      &lt;/tbody&gt;
                      &lt;tbody className="column3"&gt; 
                              &lt;th&gt;Total&lt;/th&gt;
                      {this.state.cartTotal.map((item =&gt;
                         &lt;tr&gt;&lt;td key={item}&gt;${item}&lt;/td&gt;&lt;/tr&gt;
                      ))}
                      &lt;/tbody&gt; 
                  &lt;/table&gt; 
  </code></pre>
  
  <p>I have used css to arrange a very messy looking table. However, each column basically looks like its own one column table, just all sticking next to each other. Is there any alternative solution? Ideally I would love a table column tag; I am fairly certain that does not exist, but that is the kind of solution I'm looking for. In summary: I want to display four arrays in a table, each array in its own column. I am stuck due to the necessity of mapping through each array individually. Basically I want all the first elements of each array to be displayed in the same row, same for the second element, etc...
  Any ideas sure would be appreciated!!!</p>