title: ReactJS many tables from one data array/json/request from DB
body: <p>I'm new with React and I like to built the same tables on my frontage with such data</p>
  
  <p>Example data from MongoDB:</p>
  
  <pre><code>{name:"flower1", price: 5, quantity: 34, color:"red"}
  {name:"flower2", price: 4, quantity: 57, color:"blue"}
  {name:"flower3", price: 6, quantity: 56, color:"white"}
  {name:"flower4", price: 6, quantity: 56, color:"red"}
  {name:"flower5", price: 8, quantity: 56, color:"blue"}
  </code></pre>
  
  <p>but with only one <code>type</code> in every table</p>
  
  <p>Table structure:</p>
  
  <pre><code>{table_name_by_color_from_DB}
  Name | Price | Quantity
  </code></pre>
  
  <p>For example I have 3 different colors, so it should be three tables. I could easily create tables in React, but each time when I want to create table, I should request data from Mongo. If I have 10 colors I should create 10 tables, and I'm afraid that it will be too much requests. So what's the best practice to do so? Can I just request Mongo once and then separate data from response for each table by color with .map? Could someone provide advice or a code-snippet for that?</p>