How do I dynamically generate table rows without jquery?

Question

Currently, I have a table class as follows:

import React from "react";
import "./Table.css";

export default function Table({theadData, tbodyData}) {
  return (
    <>
      <table>
        <tr>
          <th></th>
          <th>2017</th>
        </tr>
        {Array.from(theadData).forEach(heading => {
            <tr>
              <td class="largeHeader" key={heading}>{heading}</td>
              <td class="primaryCell">{tbodyData[heading].value}</td>
            </tr>;
        })}
      </table>
    </>
  );
}

When I add console.log(heading) or console.log(tbodyData[heading].value) within the loop, I can see that they give the expected values. However, none of the rows are added on. Why is that and how can I solve this problem? (I'd prefer to avoid jquery and libraries of that nature if possible, but am open to ideas.)

"Why is that" - because .forEach does not do what you think it does. You want .map instead. — Dai
– Dai, Commented Oct 11, 2022 at 3:29

Hao Wu · Accepted Answer · 2022-10-11 03:36:56Z

2

There are several mistakes you made:

change forEach to map
replace {} with (), or add return before <tr>
put key on the root element which is <tr>

{Array.from(theadData).map(heading => (
   <tr key={heading}>
     <td className="largeHeader">{heading}</td>
     <td className="primaryCell">{tbodyData[heading].value}</td>
   </tr>
))}

edited Oct 11, 2022 at 3:36

answered Oct 11, 2022 at 3:31

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

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

2 Comments

Dai Over a year ago

I'm not a React user, so forgive my ignorance - but I assume that key="" attribute values have to be unique in their context, right? So what happens if duplicate heading values end-up being used here?

Hao Wu Over a year ago

It could produce some potential bugs when you add/remove elements from theadData. A common workaround is to also associate indexes to the key, such as .map((heading, index) => <tr key={heading + index}>.

Collectives™ on Stack Overflow

How do I dynamically generate table rows without jquery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related