Rules Hub
Coding Rules Library
Prefer named keys over array indices for table columns
Avoid using numeric indices to identify columns during rendering; use stable string keys or enums to ensure readability and prevent regression when reordering.
Bad example
| 1 | const headers = ['Date', 'Product', 'Status', 'Amount']; |
| 2 |
|
| 3 | return ( |
| 4 | <tr> |
| 5 | {rowValues.map((value, index) => ( |
| 6 | <td key={index}> |
| 7 | {/* Magic number '2' assumes 'Status' is always at index 2 */} |
| 8 | {index === 2 ? <StatusBadge status={value} /> : value} |
| 9 | </td> |
| 10 | ))} |
| 11 | </tr> |
| 12 | ); |
Explanation (EN)
Using a magic number (`index === 2`) to identify a specific column is brittle and unreadable. If the column order changes or a new column is inserted, the logic will apply to the wrong data or break completely.
Objašnjenje (HR)
Korištenje 'magičnog broja' (`index === 2`) za identifikaciju određenog stupca je krhko i nečitljivo. Ako se redoslijed stupaca promijeni ili se umetne novi stupac, logika će se primijeniti na pogrešne podatke ili će se slomiti.
Good example
| 1 | const COLUMNS = [ |
| 2 | { key: 'date', label: 'Date' }, |
| 3 | { key: 'product', label: 'Product' }, |
| 4 | { key: 'status', label: 'Status' }, |
| 5 | { key: 'amount', label: 'Amount' }, |
| 6 | ] as const; |
| 7 |
|
| 8 | return ( |
| 9 | <tr> |
| 10 | {COLUMNS.map((col) => ( |
| 11 | <td key={col.key}> |
| 12 | {col.key === 'status' ? ( |
| 13 | <StatusBadge status={row[col.key]} /> |
| 14 | ) : ( |
| 15 | row[col.key] |
| 16 | )} |
| 17 | </td> |
| 18 | ))} |
| 19 | </tr> |
| 20 | ); |
Explanation (EN)
Using named keys (`col.key === 'status'`) makes the logic explicit and independent of column order. The code is self-documenting, and reordering the `COLUMNS` array won't break the rendering logic.
Objašnjenje (HR)
Korištenje imenovanih ključeva (`col.key === 'status'`) čini logiku eksplicitnom i neovisnom o redoslijedu stupaca. Kod je samodokumentirajući, a promjena redoslijeda u nizu `COLUMNS` neće slomiti logiku renderiranja.