Rules Hub
Coding Rules Library
Replace repetitive switch rendering with configuration maps
Avoid repeating identical JSX structures inside switch statements; use a configuration object to map state to visual attributes.
Bad example
| 1 | function StatusBadge({ status }: { status: 'paid' | 'pending' | 'failed' }) { |
| 2 | switch (status) { |
| 3 | case 'paid': |
| 4 | return ( |
| 5 | <span className="badge badge--green"> |
| 6 | Paid |
| 7 | </span> |
| 8 | ); |
| 9 | case 'pending': |
| 10 | return ( |
| 11 | <span className="badge badge--yellow"> |
| 12 | Pending |
| 13 | </span> |
| 14 | ); |
| 15 | case 'failed': |
| 16 | return ( |
| 17 | <span className="badge badge--red"> |
| 18 | Failed |
| 19 | </span> |
| 20 | ); |
| 21 | } |
| 22 | } |
Explanation (EN)
The code repeats the entire JSX structure for every case, changing only the class modifier and text. If the HTML structure changes (e.g., adding an icon or aria-label), you must update every case manually.
Objašnjenje (HR)
Kod ponavlja cijelu JSX strukturu za svaki slučaj, mijenjajući samo modifikator klase i tekst. Ako se HTML struktura promijeni (npr. dodavanjem ikone ili aria-labela), moraš ručno ažurirati svaki slučaj.
Good example
| 1 | const STATUS_CONFIG = { |
| 2 | paid: { color: 'green', label: 'Paid' }, |
| 3 | pending: { color: 'yellow', label: 'Pending' }, |
| 4 | failed: { color: 'red', label: 'Failed' }, |
| 5 | } as const; |
| 6 |
|
| 7 | type StatusKey = keyof typeof STATUS_CONFIG; |
| 8 |
|
| 9 | function StatusBadge({ status }: { status: StatusKey }) { |
| 10 | const { color, label } = STATUS_CONFIG[status]; |
| 11 | |
| 12 | return ( |
| 13 | <span className={`badge badge--${color}`}> |
| 14 | {label} |
| 15 | </span> |
| 16 | ); |
| 17 | } |
Explanation (EN)
The UI logic is separated from the data. The configuration map defines the differences, while the component renders the structure once. This reduces boilerplate and ensures consistency.
Objašnjenje (HR)
UI logika je odvojena od podataka. Konfiguracijska mapa definira razlike, dok komponenta renderira strukturu samo jednom. Ovo smanjuje ponavljanje koda i osigurava dosljednost.