Bug: Dynamic icon lookup in Home.jsx has no fallback (render crash risk) #125

New Issue

Closed

opened 2026-05-17 21:27:31 -05:00 by null · 0 comments

null commented

2026-05-17 21:27:31 -05:00

Owner

Problem

Home.jsx uses two different patterns for rendering icons:

Services (line 300-315): Uses explicit conditional rendering (service.icon === 'message-circle' && <MessageCircle .../>). If a new service is added with an icon not in the list, no icon renders — but it doesn't crash.

Industries (line 409): Uses dynamic lookup industryIcons[industry.icon]. If industry.icon is not in the industryIcons map, IconComponent is undefined, and <IconComponent .../> will throw a React error: Element type is invalid: expected a string or a class/function but got: undefined.

The industryIcons map only has 6 entries. Adding a new industry with a new icon string without updating the map will crash the entire page.

Fix

Add a fallback in the dynamic lookup:

const IconComponent = industryIcons[industry.icon] || Building2

Or better yet, use the same conditional rendering pattern as services for consistency.

Files

src/pages/Home.jsx — line 409

Severity

Medium — adding a new industry without updating the icon map will crash the Home page

## Problem Home.jsx uses two different patterns for rendering icons: **Services (line 300-315):** Uses explicit conditional rendering (`service.icon === 'message-circle' && <MessageCircle .../>`). If a new service is added with an icon not in the list, no icon renders — but it doesn't crash. **Industries (line 409):** Uses dynamic lookup `industryIcons[industry.icon]`. If `industry.icon` is not in the `industryIcons` map, `IconComponent` is `undefined`, and `<IconComponent .../>` will throw a React error: `Element type is invalid: expected a string or a class/function but got: undefined.` The industryIcons map only has 6 entries. Adding a new industry with a new icon string without updating the map will crash the entire page. ## Fix Add a fallback in the dynamic lookup: ```jsx const IconComponent = industryIcons[industry.icon] || Building2 ``` Or better yet, use the same conditional rendering pattern as services for consistency. ## Files - src/pages/Home.jsx — line 409 ## Severity Medium — adding a new industry without updating the icon map will crash the Home page