Bug: About Page Crashes Due to i18n Object Rendered as React Child

About Page Crash — Objects Not Valid as React Child

Current Behavior

The About page crashes when accessed because React attempts to render a translation object instead of a string. The translation key t('common.swecha.office') returns an object since returnObjects: true is enabled, but React expects a renderable string value.

Console error:

Objects are not valid as a React child

Expected Behavior

The About page should load without crashing.
Translations should render properly as strings.
The office title should display correctly in all languages.

Impact

🚨 Critical - System broken, users cannot complete core tasks
⚠️ High - Major feature broken, workaround exists but difficult
📌 Medium - Minor feature broken, workaround exists and easy
ℹ️ Low - Cosmetic issue, no functional impact

Affected Users: All users Affected Modules: About page, translations module

Reproduction Steps

Start the development server: bun dev
Navigate to the About page.
Observe the crash.
Check browser console.

Reproduction Rate: [x] Always [ ] Sometimes [ ] Rarely

Environment

Does the bug occur on:

Local development
Staging environment
Production environment

Test-Driven Bug Verification

Bug Reproduction Test Cases

Test ID	Test Description	Steps to Reproduce	Expected Result	Actual Result	Status
TC-BUG-001	About page rendering	1. Start server 2. Open About page 3. Observe	Page loads	React crash	❌ Fail

Regression Test Cases

Scenario 1: Bug is Fixed

Given the application is running
  And valid translation keys exist
 When the user opens the About page
 Then the page should load correctly
  And no React error should occur

Scenario 2: No Regression in Related Flow

Given language switching feature
 When user changes language
 Then translations should update correctly
  And About page should remain stable

Unit Test Requirements (for fix)

Test case that reproduces the bug scenario
Test for missing translation edge cases
Test for rendering validation
Test for correct translation key usage

Components/Functions to Add Tests For:

File	Function/Component	Test to Add
`src/pages/AboutPage.tsx`	`AboutPage`	Translation rendering test
`translations.json`	`swecha.office`	Structure validation

Root Cause Analysis

What caused this bug?

Technical Details:

The About page attempted to render:

t('common.swecha.office')

Since this returned an object and returnObjects: true was enabled, React crashed. The fix involved adding a title key and updating the component to use:

t('common.swecha.office.title')

Fix Verification Checklist

Bug reproduction steps now produce expected behavior
All test cases in TC-BUG-* now pass
No console errors related to this issue
No regressions in related functionality
Unit tests added to prevent recurrence
Error boundaries handle similar cases gracefully

Browser Testing

Browser	Tested	Status
Chrome	[x]	✅
Firefox	[ ]	✅
Safari	[ ]	✅
Edge	[ ]	✅

Responsive Testing

Viewport	Tested	Status
Mobile (<576px)	[ ]	✅
Tablet (576px-991px)	[ ]	✅
Desktop (≥992px)	[x]	✅

Additional Context

Screenshots / Screen Recordings

Before (Bug)	After (Fix)
About page crash	About page loads correctly

Console Errors

Objects are not valid as a React child

Network Requests

Not applicable.

Related Issues

Husky pre-commit hook failure (separate issue)

Additional Notes

Bug identified during development testing. No workaround existed except avoiding the About page entirely before the fix.

Edited Mar 25, 2026 by Shanmukha varma Lanke