Reports

function TableComponent({ numRows }) {
 return (
 <tbody>
  {Array.from({ length: numRows }).map((_, index) => (
    <ObjectRow key={index} />
  ))}
</tbody>
);
}

function ObjectRow() {
 return (
  <tr>
   <td>Row Content</td>
  </tr>
);
}

export default TableComponent;

How It Works

Array.from({ length: numRows }) creates an array with numRows elements. .map() iterates over the array, returning an ObjectRow component for each element. The key prop is added to each row for efficient rendering and reconciliation by React.

Why map and Not for?

JSX expects expressions, not statements. for is a statement, whereas map() is an expression that directly returns an array of elements. This functional approach is the most idiomatic in React.

79429959