0

I have this component that maps and creates multiple tables, the problem is it's all contained in one <TableContainer>. The mapping and layout of my return is not giving me the flexibility to individually customize each table for two reasons:

  1. Every table created is contained into <TableContainer>
  2. I cannot access each table component at the individual level.

Ideally, I have a return mapper that maps each table to it's own identity table, each with it's own <TableContainer>,

My JSON object data has 4 array's of table data. Meaning the code below, maps out four different tables.


export default function DataTables()
{
    const classes = useStyles();
    const { slug } = useParams();
    const [data, setData] = useState([])

    const getData = () => {
      axiosInstance
        .get('bucket/fin-data/' + slug)
        .then(result => setData(result.data))
    }
    useEffect(() => {
      getData()
    }, [])
        

    return (
      <TableContainer component={Paper}>
        {data.map((table) => {
          return (
            <Table className={classes.table} aria-label="simple table">
              <TableHead>
                {Object.keys(table[0]).map((ceil) => (
                  <TableCell align="right">{ceil}</TableCell>
                ))}
              </TableHead>
              <TableBody>
                {table.map((row) => (
                  <TableRow>
                    {Object.keys(row).map((ceil) => (
                      <TableCell align="right">{row[ceil]}</TableCell>
                    ))}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          );
        })}
      </TableContainer>
    );
  }

Here is some data to replicate the problem:

[
   [
      {
         "symbol":"CLX",
         "industry":"Household/Personal Care",
         "week52high":"$235.28",
         "week52low":"$155.44",
         "marketcap":"$24,057,580,961.00",
         "pe_ratio":21,
         "beta":0.26,
         "dividend_yield":"  2.28%"
      },
      {
         "symbol":"COST",
         "industry":"Specialty Stores",
         "week52high":"$386.80",
         "week52low":"$270.45",
         "marketcap":"$157,324,408,684.00",
         "pe_ratio":36,
         "beta":0.61,
         "dividend_yield":"   .77%"
      },
      {
         "symbol":"HSY",
         "industry":"Food: Specialty/Candy",
         "week52high":"$158.28",
         "week52low":"$109.58",
         "marketcap":"$30,513,617,200.00",
         "pe_ratio":26,
         "beta":0.81,
         "dividend_yield":"  2.13%"
      },
      {
         "symbol":"K",
         "industry":"Food: Major Diversified",
         "week52high":"$70.27",
         "week52low":"$52.19",
         "marketcap":"$19,945,663,997.00",
         "pe_ratio":17,
         "beta":0.47,
         "dividend_yield":"  3.88%"
      },
      {
         "symbol":"KHC",
         "industry":"Food: Major Diversified",
         "week52high":"$35.21",
         "week52low":"$19.35",
         "marketcap":"$41,324,740,852.00",
         "pe_ratio":-84,
         "beta":0.95,
         "dividend_yield":"  4.65%"
      },
      {
         "symbol":"MDLZ",
         "industry":"Food: Major Diversified",
         "week52high":"$58.71",
         "week52low":"$40.99",
         "marketcap":"$80,389,448,908.00",
         "pe_ratio":26,
         "beta":0.85,
         "dividend_yield":"  2.12%"
      },
      {
         "symbol":"PEP",
         "industry":"Beverages: Non-Alcoholic",
         "week52high":"$148.30",
         "week52low":"$101.67",
         "marketcap":"$194,800,586,126.00",
         "pe_ratio":28,
         "beta":0.91,
         "dividend_yield":"  2.82%"
      },
      {
         "symbol":"PG",
         "industry":"Household/Personal Care",
         "week52high":"$143.42",
         "week52low":"$95.34",
         "marketcap":"$319,063,021,021.00",
         "pe_ratio":23,
         "beta":0.73,
         "dividend_yield":"  2.42%"
      }
   ],
   [
      {
         "symbol":"CLX",
         "enterprisevalue":"$25,978,580,961.00",
         "enterprise_value_revenue":3.64,
         "revenuepershare":56.69,
         "debt_to_equity":6.08,
         "ebitda":"$1,480,000,000.00",
         "profitmargin":"  16.14%%",
         "price_to_sales":3.37,
         "price_to_book":21.58,
         "put_call_ratio":0.76,
         "employees":"8,800",
         "revenue_per_employee":"$810,340.91"
      },
      {
         "symbol":"COST",
         "enterprisevalue":"$150,526,408,684.00",
         "enterprise_value_revenue":0.87,
         "revenuepershare":390.4,
         "debt_to_equity":4.05,
         "ebitda":"$7,484,000,000.00",
         "profitmargin":"   2.50%%",
         "price_to_sales":0.91,
         "price_to_book":10.59,
         "put_call_ratio":0.83,
         "employees":"273,000",
         "revenue_per_employee":"$680,822.83"
      },
      {
         "symbol":"HSY",
         "enterprisevalue":"$34,234,908,200.00",
         "enterprise_value_revenue":4.26,
         "revenuepershare":38.59,
         "debt_to_equity":4.48,
         "ebitda":"$2,071,538,000.00",
         "profitmargin":"  14.87%%",
         "price_to_sales":3.8,
         "price_to_book":14.77,
         "put_call_ratio":1.27,
         "employees":null,
         "revenue_per_employee":"$497,682.78"
      },
      {
         "symbol":"K",
         "enterprisevalue":"$26,899,663,997.00",
         "enterprise_value_revenue":1.99,
         "revenuepershare":39.36,
         "debt_to_equity":6.22,
         "ebitda":"$2,203,000,000.00",
         "profitmargin":"   8.80%%",
         "price_to_sales":1.47,
         "price_to_book":6.55,
         "put_call_ratio":0.84,
         "employees":null,
         "revenue_per_employee":"$397,911.76"
      },
      {
         "symbol":"KHC",
         "enterprisevalue":"$67,021,740,852.00",
         "enterprise_value_revenue":2.6,
         "revenuepershare":21.09,
         "debt_to_equity":1.99,
         "ebitda":"$6,217,500,000.00",
         "profitmargin":"  -1.92%%",
         "price_to_sales":1.6,
         "price_to_book":0.84,
         "put_call_ratio":0.55,
         "employees":"37,000",
         "revenue_per_employee":"$665,221.77"
      },
      {
         "symbol":"MDLZ",
         "enterprisevalue":"$97,744,448,908.00",
         "enterprise_value_revenue":3.73,
         "revenuepershare":18.32,
         "debt_to_equity":2.46,
         "ebitda":"$4,544,000,000.00",
         "profitmargin":"  11.99%%",
         "price_to_sales":3.07,
         "price_to_book":2.98,
         "put_call_ratio":1.37,
         "employees":"80,000",
         "revenue_per_employee":"$327,450.00"
      },
      {
         "symbol":"PEP",
         "enterprisevalue":"$229,666,586,126.00",
         "enterprise_value_revenue":3.35,
         "revenuepershare":49.61,
         "debt_to_equity":6.83,
         "ebitda":"$12,292,000,000.00",
         "profitmargin":"  10.27%%",
         "price_to_sales":2.84,
         "price_to_book":14.45,
         "put_call_ratio":0.95,
         "employees":"267,000",
         "revenue_per_employee":"$256,767.79"
      },
      {
         "symbol":"PG",
         "enterprisevalue":"$338,222,021,021.00",
         "enterprise_value_revenue":4.57,
         "revenuepershare":30.04,
         "debt_to_equity":2.49,
         "ebitda":"$20,550,000,000.00",
         "profitmargin":"  18.36%%",
         "price_to_sales":4.31,
         "price_to_book":6.75,
         "put_call_ratio":0.81,
         "employees":null,
         "revenue_per_employee":null
      }
   ],
   [
      {
         "symbol":"CLX",
         "rating_buy":" 13%",
         "rating_overweight":" 19%",
         "rating_hold":" 50%",
         "rating_underweight":" 19%",
         "rating_sell":"  0%",
         "total_recs":16,
         "rating_scale":"  2.75"
      },
      {
         "symbol":"COST",
         "rating_buy":" 24%",
         "rating_overweight":" 41%",
         "rating_hold":" 32%",
         "rating_underweight":"  0%",
         "rating_sell":"  3%",
         "total_recs":34,
         "rating_scale":"  2.18"
      },
      {
         "symbol":"HSY",
         "rating_buy":" 11%",
         "rating_overweight":" 17%",
         "rating_hold":" 72%",
         "rating_underweight":"  0%",
         "rating_sell":"  0%",
         "total_recs":18,
         "rating_scale":"  2.61"
      },
      {
         "symbol":"K",
         "rating_buy":" 15%",
         "rating_overweight":" 20%",
         "rating_hold":" 55%",
         "rating_underweight":"  5%",
         "rating_sell":"  5%",
         "total_recs":20,
         "rating_scale":"  2.65"
      },
      {
         "symbol":"KHC",
         "rating_buy":" 14%",
         "rating_overweight":" 24%",
         "rating_hold":" 52%",
         "rating_underweight":" 10%",
         "rating_sell":"  0%",
         "total_recs":21,
         "rating_scale":"  2.57"
      },
      {
         "symbol":"MDLZ",
         "rating_buy":" 25%",
         "rating_overweight":" 63%",
         "rating_hold":" 13%",
         "rating_underweight":"  0%",
         "rating_sell":"  0%",
         "total_recs":24,
         "rating_scale":"  1.88"
      },
      {
         "symbol":"PEP",
         "rating_buy":" 23%",
         "rating_overweight":" 32%",
         "rating_hold":" 41%",
         "rating_underweight":"  0%",
         "rating_sell":"  5%",
         "total_recs":22,
         "rating_scale":"  2.32"
      },
      {
         "symbol":"PG",
         "rating_buy":" 21%",
         "rating_overweight":" 33%",
         "rating_hold":" 42%",
         "rating_underweight":"  0%",
         "rating_sell":"  4%",
         "total_recs":24,
         "rating_scale":"  2.33"
      }
   ],
   [
      {
         "symbol":"CLX",
         "ytd_changepercent":"   -4.79%",
         "day5_changepercent":"   -8.69%",
         "day30_changepercent":"   -2.61%",
         "month3_changepercent":"   -9.73%",
         "month6_changepercent":"  -18.52%",
         "year1_changepercent":"   18.10%",
         "year2_changepercent":"   31.24%",
         "year5_changepercent":"   73.24%",
         "max_changepercent":"   328.77%"
      },
      {
         "symbol":"COST",
         "ytd_changepercent":"   -5.55%",
         "day5_changepercent":"     .98%",
         "day30_changepercent":"   -3.82%",
         "month3_changepercent":"   -5.20%",
         "month6_changepercent":"    7.63%",
         "year1_changepercent":"   19.21%",
         "year2_changepercent":"   75.75%",
         "year5_changepercent":"  177.91%",
         "max_changepercent":"   806.99%"
      },
      {
         "symbol":"HSY",
         "ytd_changepercent":"   -3.76%",
         "day5_changepercent":"     .80%",
         "day30_changepercent":"   -3.08%",
         "month3_changepercent":"    1.93%",
         "month6_changepercent":"    4.16%",
         "year1_changepercent":"   -2.02%",
         "year2_changepercent":"   44.34%",
         "year5_changepercent":"   88.36%",
         "max_changepercent":"   300.50%"
      },
      {
         "symbol":"K",
         "ytd_changepercent":"   -6.75%",
         "day5_changepercent":"   -1.54%",
         "day30_changepercent":"   -5.37%",
         "month3_changepercent":"   -8.93%",
         "month6_changepercent":"  -14.77%",
         "year1_changepercent":"  -13.32%",
         "year2_changepercent":"    5.65%",
         "year5_changepercent":"   -4.81%",
         "max_changepercent":"   101.49%"
      },
      {
         "symbol":"KHC",
         "ytd_changepercent":"   -2.48%",
         "day5_changepercent":"     .87%",
         "day30_changepercent":"    -.41%",
         "month3_changepercent":"    7.90%",
         "month6_changepercent":"    -.53%",
         "year1_changepercent":"   21.39%",
         "year2_changepercent":"  -21.83%",
         "year5_changepercent":"  -42.90%",
         "max_changepercent":"   -41.71%"
      },
      {
         "symbol":"MDLZ",
         "ytd_changepercent":"   -3.87%",
         "day5_changepercent":"    1.39%",
         "day30_changepercent":"   -2.87%",
         "month3_changepercent":"    1.57%",
         "month6_changepercent":"    3.04%",
         "year1_changepercent":"    -.73%",
         "year2_changepercent":"   27.61%",
         "year5_changepercent":"   65.20%",
         "max_changepercent":"    86.23%"
      },
      {
         "symbol":"PEP",
         "ytd_changepercent":"   -4.95%",
         "day5_changepercent":"    3.21%",
         "day30_changepercent":"   -1.38%",
         "month3_changepercent":"    2.83%",
         "month6_changepercent":"    4.94%",
         "year1_changepercent":"     .53%",
         "year2_changepercent":"   32.30%",
         "year5_changepercent":"   66.48%",
         "max_changepercent":"   219.64%"
      },
      {
         "symbol":"PG",
         "ytd_changepercent":"   -6.32%",
         "day5_changepercent":"    1.06%",
         "day30_changepercent":"   -7.00%",
         "month3_changepercent":"   -8.45%",
         "month6_changepercent":"   -1.77%",
         "year1_changepercent":"    4.71%",
         "year2_changepercent":"   39.83%",
         "year5_changepercent":"   84.87%",
         "max_changepercent":"   191.33%"
      }
   ]
]

TO reiterate my original question, how can I dynamically map out a table for each array in my JSON object, keeping in mind the possibility of customizing each table at the individual level?

Improve this question
2
  • 1
    And why can't you just map it to 4 separate TableContainers exactly.. ? Commented Feb 8, 2021 at 17:19
  • I've tried doing that, but I'm getting React Strict mode errors because I'm structuring the return function wrong. As well as I was not able to customize each individual table with my attempt. Commented Feb 8, 2021 at 17:24

1 Answer 1

Reset to default
1

As for the strict-mode warnings: React doesn't like a JSX that is not wrapped with a single html element. To make it happy, just wrap your JSX in a <React.Fragment>.

edit You can easily modify the objects mapped from particular array's indexes. In my example it's <Table>'s className.

return (
   <>
      {data.map((table, index) => {
        if (index !== 3) return (<TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
              <TableHead>
                {Object.keys(table[0]).map((ceil) => (
                  <TableCell align="right">{ceil}</TableCell>
                ))}
              </TableHead>
              <TableBody>
                {table.map((row) => (
                  if<TableRow>
                    {Object.keys(row).map((ceil) => (
                      <TableCell align="right">{row[ceil]}</TableCell>
                    ))}
                  </TableRow>
                ))}
              </TableBody>
            </Table>   
        </TableContainer>);
      }) else return (
          <span>paste your modified table code here</span>
      );
   </>
);

Now, what do you mean you can't customize each table? What do you mean by "customization"?

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thank you, that's one step closer to solving my problem. Basically what I mean by customization is, being able to control each table at an individual level, by adding their own additional components. For example, for one table, I want to hover over the headers for a <ToolTip> to appear. Currently, if I were to add a tooltip with this code, then all tables would have a tooltip. As well customizing positional layout using their own <grids>.
I think so, sorry I'm a little new to React so I'm not sure exactly what to expect, could you explain the new changes? How would someone be able to reference a specific table, let's say, table number 3 (3rd array from the JSON object data)
Thank you for all the help, makes it a lot easier. Two last questions: How many if else statements can I have in this format (referring to each index)? and when you say "paste your modified table code here", what exactly are you referring too? The extra components that I had in mind for each table?
Also, that if statement for the body row looks funky, had to remove it to get everything working. But nonetheless thank you so much this is very helpful for me.
You can have as many if statements as you want, as long as they make sense logically. When you know this, you can modify every mapped element with its index however you want (if it only makes sense jsx-wise). If you need more guidance, pay a teacher or find a tutorial :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.