bug: React error #31 rendering project tags on item detail #33

New Issue

forbes · 2026-02-08T21:09:15Z

forbes commented

2026-02-08 21:09:15 +00:00

Bug

Opening an item detail throws React error #31: "Objects are not valid as a React child (found: object with keys {id, code, name, created_at})."

Root Cause

MainTab.tsx line 30 fetches item projects typed as string[]:

get<string[]>(`/api/items/${encodeURIComponent(item.part_number)}/projects`)
  .then(setItemProjects)

But HandleGetItemProjects (handlers.go:1576) returns []ProjectResponse — an array of objects with keys {id, code, name, description, created_at}, not strings.

When line 95 renders {code} inside JSX, code is the full project object, not a string:

{itemProjects.map((code) => (
  <span key={code} style={...}>
    {code}   // ← object, not string → React error #31
  </span>
))}

Fix

Change the frontend to match the actual API response:

Type the fetch as get<{id: string, code: string, name: string, created_at: string}[]>
Render {project.code} instead of {code}
Update the project-add filter (.filter((p) => !itemProjects.includes(p.code))) to compare correctly

## Bug Opening an item detail throws React error #31: "Objects are not valid as a React child (found: object with keys {id, code, name, created_at})." ## Root Cause `MainTab.tsx` line 30 fetches item projects typed as `string[]`: ```typescript get<string[]>(`/api/items/${encodeURIComponent(item.part_number)}/projects`) .then(setItemProjects) ``` But `HandleGetItemProjects` (handlers.go:1576) returns `[]ProjectResponse` — an array of objects with keys `{id, code, name, description, created_at}`, not strings. When line 95 renders `{code}` inside JSX, `code` is the full project object, not a string: ```tsx {itemProjects.map((code) => ( <span key={code} style={...}> {code} // ← object, not string → React error #31 </span> ))} ``` ## Fix Change the frontend to match the actual API response: 1. Type the fetch as `get<{id: string, code: string, name: string, created_at: string}[]>` 2. Render `{project.code}` instead of `{code}` 3. Update the project-add filter (`.filter((p) => !itemProjects.includes(p.code))`) to compare correctly

forbes referenced this issue from a commit

2026-02-08 21:11:27 +00:00

fix: render project tags as strings, not objects

forbes referenced a pull request that will close this issue

2026-02-08 21:11:34 +00:00

fix: render project tags as strings, not objects #34

forbes closed this issue

2026-02-08 21:23:20 +00:00

Sign in to join this conversation.