title: React/Material-UI: How can I map multiple tables from a JSON object with more than one array of data?
body: <p>I'm trying to figure out the best way to create one dynamic table component that creates separate tables based on the number of arrays in a dictionary object (basically iterating through each array and re-producing a table).</p>
  <p>For my specific case, I have 4 arrays worth of table data from one Axios call, meaning four separate tables that need to be produced. Here is an example of the data object:
  <a href="https://i.stack.imgur.com/7h0XQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7h0XQ.png" alt="enter image description here" /></a></p>
  <p>I'm trying not to hard code the tables, here is what I have so far.</p>
  <p>Note, the code used as mapping is just there as pseudocode to help me plan this out.</p>
  <pre><code>export default function DataTables()
  {
      const classes = useStyles();
      const { slug } = useParams();
      const [data, setData] = useState({ finData: [] });
  
      useEffect(() =&gt;
      {
          const fetchData = async () =&gt;
          {
              const result = await axiosInstance.get('bucket/fin-data/' + slug);
              setData(result.data);
          };
          fetchData();
      }, []);
          
  
      return (
          &lt;TableContainer component={Paper}&gt; 
              &lt;Table className={classes.table} aria-label=&quot;simple table&quot;&gt;
                  {data.map((table) =&gt; (
                  &lt;TableHead&gt;
                      {data.map((header) =&gt; (
                      &lt;TableRow&gt;
                          &lt;TableCell&gt;{header}&lt;/TableCell&gt;  
                      &lt;/TableRow&gt;
                      ))}
                  &lt;/TableHead&gt;
                  &lt;TableBody&gt;
                      {data.map((row) =&gt; (
                      &lt;TableRow &gt;
                          &lt;TableCell&gt;{row}&lt;/TableCell&gt;
                      &lt;/TableRow&gt;
                      ))}
                  &lt;/TableBody&gt;
                  ))}
              &lt;/Table&gt;
          &lt;/TableContainer&gt;
      );
  }
  
  </code></pre>
  <p>Would greatly appreciate some advice and/ or pseudocode on how I can accomplish this. I'm assuming I need to create a state/and or function that holds the amount of arrays for the mapping to iterate through?</p>
  <p>Here is data to play with:</p>
  <pre><code>[
     [
        {
           &quot;symbol&quot;:&quot;CLX&quot;,
           &quot;industry&quot;:&quot;Household/Personal Care&quot;,
           &quot;week52high&quot;:&quot;$235.28&quot;,
           &quot;week52low&quot;:&quot;$155.44&quot;,
           &quot;marketcap&quot;:&quot;$24,057,580,961.00&quot;,
           &quot;pe_ratio&quot;:21,
           &quot;beta&quot;:0.26,
           &quot;dividend_yield&quot;:&quot;  2.28%&quot;
        },
        {
           &quot;symbol&quot;:&quot;COST&quot;,
           &quot;industry&quot;:&quot;Specialty Stores&quot;,
           &quot;week52high&quot;:&quot;$386.80&quot;,
           &quot;week52low&quot;:&quot;$270.45&quot;,
           &quot;marketcap&quot;:&quot;$157,324,408,684.00&quot;,
           &quot;pe_ratio&quot;:36,
           &quot;beta&quot;:0.61,
           &quot;dividend_yield&quot;:&quot;   .77%&quot;
        },
        {
           &quot;symbol&quot;:&quot;HSY&quot;,
           &quot;industry&quot;:&quot;Food: Specialty/Candy&quot;,
           &quot;week52high&quot;:&quot;$158.28&quot;,
           &quot;week52low&quot;:&quot;$109.58&quot;,
           &quot;marketcap&quot;:&quot;$30,513,617,200.00&quot;,
           &quot;pe_ratio&quot;:26,
           &quot;beta&quot;:0.81,
           &quot;dividend_yield&quot;:&quot;  2.13%&quot;
        },
        {
           &quot;symbol&quot;:&quot;K&quot;,
           &quot;industry&quot;:&quot;Food: Major Diversified&quot;,
           &quot;week52high&quot;:&quot;$70.27&quot;,
           &quot;week52low&quot;:&quot;$52.19&quot;,
           &quot;marketcap&quot;:&quot;$19,945,663,997.00&quot;,
           &quot;pe_ratio&quot;:17,
           &quot;beta&quot;:0.47,
           &quot;dividend_yield&quot;:&quot;  3.88%&quot;
        },
        {
           &quot;symbol&quot;:&quot;KHC&quot;,
           &quot;industry&quot;:&quot;Food: Major Diversified&quot;,
           &quot;week52high&quot;:&quot;$35.21&quot;,
           &quot;week52low&quot;:&quot;$19.35&quot;,
           &quot;marketcap&quot;:&quot;$41,324,740,852.00&quot;,
           &quot;pe_ratio&quot;:-84,
           &quot;beta&quot;:0.95,
           &quot;dividend_yield&quot;:&quot;  4.65%&quot;
        },
        {
           &quot;symbol&quot;:&quot;MDLZ&quot;,
           &quot;industry&quot;:&quot;Food: Major Diversified&quot;,
           &quot;week52high&quot;:&quot;$58.71&quot;,
           &quot;week52low&quot;:&quot;$40.99&quot;,
           &quot;marketcap&quot;:&quot;$80,389,448,908.00&quot;,
           &quot;pe_ratio&quot;:26,
           &quot;beta&quot;:0.85,
           &quot;dividend_yield&quot;:&quot;  2.12%&quot;
        },
        {
           &quot;symbol&quot;:&quot;PEP&quot;,
           &quot;industry&quot;:&quot;Beverages: Non-Alcoholic&quot;,
           &quot;week52high&quot;:&quot;$148.30&quot;,
           &quot;week52low&quot;:&quot;$101.67&quot;,
           &quot;marketcap&quot;:&quot;$194,800,586,126.00&quot;,
           &quot;pe_ratio&quot;:28,
           &quot;beta&quot;:0.91,
           &quot;dividend_yield&quot;:&quot;  2.82%&quot;
        },
        {
           &quot;symbol&quot;:&quot;PG&quot;,
           &quot;industry&quot;:&quot;Household/Personal Care&quot;,
           &quot;week52high&quot;:&quot;$143.42&quot;,
           &quot;week52low&quot;:&quot;$95.34&quot;,
           &quot;marketcap&quot;:&quot;$319,063,021,021.00&quot;,
           &quot;pe_ratio&quot;:23,
           &quot;beta&quot;:0.73,
           &quot;dividend_yield&quot;:&quot;  2.42%&quot;
        }
     ],
     [
        {
           &quot;symbol&quot;:&quot;CLX&quot;,
           &quot;enterprisevalue&quot;:&quot;$25,978,580,961.00&quot;,
           &quot;enterprise_value_revenue&quot;:3.64,
           &quot;revenuepershare&quot;:56.69,
           &quot;debt_to_equity&quot;:6.08,
           &quot;ebitda&quot;:&quot;$1,480,000,000.00&quot;,
           &quot;profitmargin&quot;:&quot;  16.14%%&quot;,
           &quot;price_to_sales&quot;:3.37,
           &quot;price_to_book&quot;:21.58,
           &quot;put_call_ratio&quot;:0.76,
           &quot;employees&quot;:&quot;8,800&quot;,
           &quot;revenue_per_employee&quot;:&quot;$810,340.91&quot;
        },
        {
           &quot;symbol&quot;:&quot;COST&quot;,
           &quot;enterprisevalue&quot;:&quot;$150,526,408,684.00&quot;,
           &quot;enterprise_value_revenue&quot;:0.87,
           &quot;revenuepershare&quot;:390.4,
           &quot;debt_to_equity&quot;:4.05,
           &quot;ebitda&quot;:&quot;$7,484,000,000.00&quot;,
           &quot;profitmargin&quot;:&quot;   2.50%%&quot;,
           &quot;price_to_sales&quot;:0.91,
           &quot;price_to_book&quot;:10.59,
           &quot;put_call_ratio&quot;:0.83,
           &quot;employees&quot;:&quot;273,000&quot;,
           &quot;revenue_per_employee&quot;:&quot;$680,822.83&quot;
        },
        {
           &quot;symbol&quot;:&quot;HSY&quot;,
           &quot;enterprisevalue&quot;:&quot;$34,234,908,200.00&quot;,
           &quot;enterprise_value_revenue&quot;:4.26,
           &quot;revenuepershare&quot;:38.59,
           &quot;debt_to_equity&quot;:4.48,
           &quot;ebitda&quot;:&quot;$2,071,538,000.00&quot;,
           &quot;profitmargin&quot;:&quot;  14.87%%&quot;,
           &quot;price_to_sales&quot;:3.8,
           &quot;price_to_book&quot;:14.77,
           &quot;put_call_ratio&quot;:1.27,
           &quot;employees&quot;:null,
           &quot;revenue_per_employee&quot;:&quot;$497,682.78&quot;
        },
        {
           &quot;symbol&quot;:&quot;K&quot;,
           &quot;enterprisevalue&quot;:&quot;$26,899,663,997.00&quot;,
           &quot;enterprise_value_revenue&quot;:1.99,
           &quot;revenuepershare&quot;:39.36,
           &quot;debt_to_equity&quot;:6.22,
           &quot;ebitda&quot;:&quot;$2,203,000,000.00&quot;,
           &quot;profitmargin&quot;:&quot;   8.80%%&quot;,
           &quot;price_to_sales&quot;:1.47,
           &quot;price_to_book&quot;:6.55,
           &quot;put_call_ratio&quot;:0.84,
           &quot;employees&quot;:null,
           &quot;revenue_per_employee&quot;:&quot;$397,911.76&quot;
        },
        {
           &quot;symbol&quot;:&quot;KHC&quot;,
           &quot;enterprisevalue&quot;:&quot;$67,021,740,852.00&quot;,
           &quot;enterprise_value_revenue&quot;:2.6,
           &quot;revenuepershare&quot;:21.09,
           &quot;debt_to_equity&quot;:1.99,
           &quot;ebitda&quot;:&quot;$6,217,500,000.00&quot;,
           &quot;profitmargin&quot;:&quot;  -1.92%%&quot;,
           &quot;price_to_sales&quot;:1.6,
           &quot;price_to_book&quot;:0.84,
           &quot;put_call_ratio&quot;:0.55,
           &quot;employees&quot;:&quot;37,000&quot;,
           &quot;revenue_per_employee&quot;:&quot;$665,221.77&quot;
        },
        {
           &quot;symbol&quot;:&quot;MDLZ&quot;,
           &quot;enterprisevalue&quot;:&quot;$97,744,448,908.00&quot;,
           &quot;enterprise_value_revenue&quot;:3.73,
           &quot;revenuepershare&quot;:18.32,
           &quot;debt_to_equity&quot;:2.46,
           &quot;ebitda&quot;:&quot;$4,544,000,000.00&quot;,
           &quot;profitmargin&quot;:&quot;  11.99%%&quot;,
           &quot;price_to_sales&quot;:3.07,
           &quot;price_to_book&quot;:2.98,
           &quot;put_call_ratio&quot;:1.37,
           &quot;employees&quot;:&quot;80,000&quot;,
           &quot;revenue_per_employee&quot;:&quot;$327,450.00&quot;
        },
        {
           &quot;symbol&quot;:&quot;PEP&quot;,
           &quot;enterprisevalue&quot;:&quot;$229,666,586,126.00&quot;,
           &quot;enterprise_value_revenue&quot;:3.35,
           &quot;revenuepershare&quot;:49.61,
           &quot;debt_to_equity&quot;:6.83,
           &quot;ebitda&quot;:&quot;$12,292,000,000.00&quot;,
           &quot;profitmargin&quot;:&quot;  10.27%%&quot;,
           &quot;price_to_sales&quot;:2.84,
           &quot;price_to_book&quot;:14.45,
           &quot;put_call_ratio&quot;:0.95,
           &quot;employees&quot;:&quot;267,000&quot;,
           &quot;revenue_per_employee&quot;:&quot;$256,767.79&quot;
        },
        {
           &quot;symbol&quot;:&quot;PG&quot;,
           &quot;enterprisevalue&quot;:&quot;$338,222,021,021.00&quot;,
           &quot;enterprise_value_revenue&quot;:4.57,
           &quot;revenuepershare&quot;:30.04,
           &quot;debt_to_equity&quot;:2.49,
           &quot;ebitda&quot;:&quot;$20,550,000,000.00&quot;,
           &quot;profitmargin&quot;:&quot;  18.36%%&quot;,
           &quot;price_to_sales&quot;:4.31,
           &quot;price_to_book&quot;:6.75,
           &quot;put_call_ratio&quot;:0.81,
           &quot;employees&quot;:null,
           &quot;revenue_per_employee&quot;:null
        }
     ],
     [
        {
           &quot;symbol&quot;:&quot;CLX&quot;,
           &quot;rating_buy&quot;:&quot; 13%&quot;,
           &quot;rating_overweight&quot;:&quot; 19%&quot;,
           &quot;rating_hold&quot;:&quot; 50%&quot;,
           &quot;rating_underweight&quot;:&quot; 19%&quot;,
           &quot;rating_sell&quot;:&quot;  0%&quot;,
           &quot;total_recs&quot;:16,
           &quot;rating_scale&quot;:&quot;  2.75&quot;
        },
        {
           &quot;symbol&quot;:&quot;COST&quot;,
           &quot;rating_buy&quot;:&quot; 24%&quot;,
           &quot;rating_overweight&quot;:&quot; 41%&quot;,
           &quot;rating_hold&quot;:&quot; 32%&quot;,
           &quot;rating_underweight&quot;:&quot;  0%&quot;,
           &quot;rating_sell&quot;:&quot;  3%&quot;,
           &quot;total_recs&quot;:34,
           &quot;rating_scale&quot;:&quot;  2.18&quot;
        },
        {
           &quot;symbol&quot;:&quot;HSY&quot;,
           &quot;rating_buy&quot;:&quot; 11%&quot;,
           &quot;rating_overweight&quot;:&quot; 17%&quot;,
           &quot;rating_hold&quot;:&quot; 72%&quot;,
           &quot;rating_underweight&quot;:&quot;  0%&quot;,
           &quot;rating_sell&quot;:&quot;  0%&quot;,
           &quot;total_recs&quot;:18,
           &quot;rating_scale&quot;:&quot;  2.61&quot;
        },
        {
           &quot;symbol&quot;:&quot;K&quot;,
           &quot;rating_buy&quot;:&quot; 15%&quot;,
           &quot;rating_overweight&quot;:&quot; 20%&quot;,
           &quot;rating_hold&quot;:&quot; 55%&quot;,
           &quot;rating_underweight&quot;:&quot;  5%&quot;,
           &quot;rating_sell&quot;:&quot;  5%&quot;,
           &quot;total_recs&quot;:20,
           &quot;rating_scale&quot;:&quot;  2.65&quot;
        },
        {
           &quot;symbol&quot;:&quot;KHC&quot;,
           &quot;rating_buy&quot;:&quot; 14%&quot;,
           &quot;rating_overweight&quot;:&quot; 24%&quot;,
           &quot;rating_hold&quot;:&quot; 52%&quot;,
           &quot;rating_underweight&quot;:&quot; 10%&quot;,
           &quot;rating_sell&quot;:&quot;  0%&quot;,
           &quot;total_recs&quot;:21,
           &quot;rating_scale&quot;:&quot;  2.57&quot;
        },
        {
           &quot;symbol&quot;:&quot;MDLZ&quot;,
           &quot;rating_buy&quot;:&quot; 25%&quot;,
           &quot;rating_overweight&quot;:&quot; 63%&quot;,
           &quot;rating_hold&quot;:&quot; 13%&quot;,
           &quot;rating_underweight&quot;:&quot;  0%&quot;,
           &quot;rating_sell&quot;:&quot;  0%&quot;,
           &quot;total_recs&quot;:24,
           &quot;rating_scale&quot;:&quot;  1.88&quot;
        },
        {
           &quot;symbol&quot;:&quot;PEP&quot;,
           &quot;rating_buy&quot;:&quot; 23%&quot;,
           &quot;rating_overweight&quot;:&quot; 32%&quot;,
           &quot;rating_hold&quot;:&quot; 41%&quot;,
           &quot;rating_underweight&quot;:&quot;  0%&quot;,
           &quot;rating_sell&quot;:&quot;  5%&quot;,
           &quot;total_recs&quot;:22,
           &quot;rating_scale&quot;:&quot;  2.32&quot;
        },
        {
           &quot;symbol&quot;:&quot;PG&quot;,
           &quot;rating_buy&quot;:&quot; 21%&quot;,
           &quot;rating_overweight&quot;:&quot; 33%&quot;,
           &quot;rating_hold&quot;:&quot; 42%&quot;,
           &quot;rating_underweight&quot;:&quot;  0%&quot;,
           &quot;rating_sell&quot;:&quot;  4%&quot;,
           &quot;total_recs&quot;:24,
           &quot;rating_scale&quot;:&quot;  2.33&quot;
        }
     ],
     [
        {
           &quot;symbol&quot;:&quot;CLX&quot;,
           &quot;ytd_changepercent&quot;:&quot;   -4.79%&quot;,
           &quot;day5_changepercent&quot;:&quot;   -8.69%&quot;,
           &quot;day30_changepercent&quot;:&quot;   -2.61%&quot;,
           &quot;month3_changepercent&quot;:&quot;   -9.73%&quot;,
           &quot;month6_changepercent&quot;:&quot;  -18.52%&quot;,
           &quot;year1_changepercent&quot;:&quot;   18.10%&quot;,
           &quot;year2_changepercent&quot;:&quot;   31.24%&quot;,
           &quot;year5_changepercent&quot;:&quot;   73.24%&quot;,
           &quot;max_changepercent&quot;:&quot;   328.77%&quot;
        },
        {
           &quot;symbol&quot;:&quot;COST&quot;,
           &quot;ytd_changepercent&quot;:&quot;   -5.55%&quot;,
           &quot;day5_changepercent&quot;:&quot;     .98%&quot;,
           &quot;day30_changepercent&quot;:&quot;   -3.82%&quot;,
           &quot;month3_changepercent&quot;:&quot;   -5.20%&quot;,
           &quot;month6_changepercent&quot;:&quot;    7.63%&quot;,
           &quot;year1_changepercent&quot;:&quot;   19.21%&quot;,
           &quot;year2_changepercent&quot;:&quot;   75.75%&quot;,
           &quot;year5_changepercent&quot;:&quot;  177.91%&quot;,
           &quot;max_changepercent&quot;:&quot;   806.99%&quot;
        },
        {
           &quot;symbol&quot;:&quot;HSY&quot;,
           &quot;ytd_changepercent&quot;:&quot;   -3.76%&quot;,
           &quot;day5_changepercent&quot;:&quot;     .80%&quot;,
           &quot;day30_changepercent&quot;:&quot;   -3.08%&quot;,
           &quot;month3_changepercent&quot;:&quot;    1.93%&quot;,
           &quot;month6_changepercent&quot;:&quot;    4.16%&quot;,
           &quot;year1_changepercent&quot;:&quot;   -2.02%&quot;,
           &quot;year2_changepercent&quot;:&quot;   44.34%&quot;,
           &quot;year5_changepercent&quot;:&quot;   88.36%&quot;,
           &quot;max_changepercent&quot;:&quot;   300.50%&quot;
        },
        {
           &quot;symbol&quot;:&quot;K&quot;,
           &quot;ytd_changepercent&quot;:&quot;   -6.75%&quot;,
           &quot;day5_changepercent&quot;:&quot;   -1.54%&quot;,
           &quot;day30_changepercent&quot;:&quot;   -5.37%&quot;,
           &quot;month3_changepercent&quot;:&quot;   -8.93%&quot;,
           &quot;month6_changepercent&quot;:&quot;  -14.77%&quot;,
           &quot;year1_changepercent&quot;:&quot;  -13.32%&quot;,
           &quot;year2_changepercent&quot;:&quot;    5.65%&quot;,
           &quot;year5_changepercent&quot;:&quot;   -4.81%&quot;,
           &quot;max_changepercent&quot;:&quot;   101.49%&quot;
        },
        {
           &quot;symbol&quot;:&quot;KHC&quot;,
           &quot;ytd_changepercent&quot;:&quot;   -2.48%&quot;,
           &quot;day5_changepercent&quot;:&quot;     .87%&quot;,
           &quot;day30_changepercent&quot;:&quot;    -.41%&quot;,
           &quot;month3_changepercent&quot;:&quot;    7.90%&quot;,
           &quot;month6_changepercent&quot;:&quot;    -.53%&quot;,
           &quot;year1_changepercent&quot;:&quot;   21.39%&quot;,
           &quot;year2_changepercent&quot;:&quot;  -21.83%&quot;,
           &quot;year5_changepercent&quot;:&quot;  -42.90%&quot;,
           &quot;max_changepercent&quot;:&quot;   -41.71%&quot;
        },
        {
           &quot;symbol&quot;:&quot;MDLZ&quot;,
           &quot;ytd_changepercent&quot;:&quot;   -3.87%&quot;,
           &quot;day5_changepercent&quot;:&quot;    1.39%&quot;,
           &quot;day30_changepercent&quot;:&quot;   -2.87%&quot;,
           &quot;month3_changepercent&quot;:&quot;    1.57%&quot;,
           &quot;month6_changepercent&quot;:&quot;    3.04%&quot;,
           &quot;year1_changepercent&quot;:&quot;    -.73%&quot;,
           &quot;year2_changepercent&quot;:&quot;   27.61%&quot;,
           &quot;year5_changepercent&quot;:&quot;   65.20%&quot;,
           &quot;max_changepercent&quot;:&quot;    86.23%&quot;
        },
        {
           &quot;symbol&quot;:&quot;PEP&quot;,
           &quot;ytd_changepercent&quot;:&quot;   -4.95%&quot;,
           &quot;day5_changepercent&quot;:&quot;    3.21%&quot;,
           &quot;day30_changepercent&quot;:&quot;   -1.38%&quot;,
           &quot;month3_changepercent&quot;:&quot;    2.83%&quot;,
           &quot;month6_changepercent&quot;:&quot;    4.94%&quot;,
           &quot;year1_changepercent&quot;:&quot;     .53%&quot;,
           &quot;year2_changepercent&quot;:&quot;   32.30%&quot;,
           &quot;year5_changepercent&quot;:&quot;   66.48%&quot;,
           &quot;max_changepercent&quot;:&quot;   219.64%&quot;
        },
        {
           &quot;symbol&quot;:&quot;PG&quot;,
           &quot;ytd_changepercent&quot;:&quot;   -6.32%&quot;,
           &quot;day5_changepercent&quot;:&quot;    1.06%&quot;,
           &quot;day30_changepercent&quot;:&quot;   -7.00%&quot;,
           &quot;month3_changepercent&quot;:&quot;   -8.45%&quot;,
           &quot;month6_changepercent&quot;:&quot;   -1.77%&quot;,
           &quot;year1_changepercent&quot;:&quot;    4.71%&quot;,
           &quot;year2_changepercent&quot;:&quot;   39.83%&quot;,
           &quot;year5_changepercent&quot;:&quot;   84.87%&quot;,
           &quot;max_changepercent&quot;:&quot;   191.33%&quot;
        }
     ]
  ]
  
  </code></pre>
  <p>EDIT EDIT: new axios call using Promise</p>
  <pre><code>    const [data, setData] = useState([]);
  
      useEffect(() =&gt;
      {
          const fetchData = async () =&gt;
          {
              const result = Promise(axiosInstance.get('bucket/fin-data/' + slug)
                  .then(setData(result.data)));
              };
          fetchData();
      }, []);
  </code></pre>