Skip to content

Fix: Create Account failure caused by incorrect translation structure

Issue Summary

The React application shows a blank screen on the account creation page. The console displays the following error:

"Objects are not valid as a React child"

Expected behavior: The country code (+91) should render correctly in the phone input field.

Problem Statement

  • In the translation files, the key common.91 is defined as an object instead of a string
  • The React component attempts to render it using {t('common.91')}
  • React cannot render objects directly → causes application crash

Affected Areas:

  • Account creation page
  • Phone input component

Impact:

  • Users cannot create accounts ❌
  • Page crashes (blank screen) ❌

Steps to Reproduce:

  1. Open the application
  2. Navigate to "Create Account"
  3. Observe the page crash

Proposed Solution

  • Update all translation files to ensure common.91 is a string:
"91": "+91"

  • Files to update:

    • src/locales/en/translations.json
    • src/locales/te/translations.json
    • src/locales/hi/translations.json

  • Ensure {t('common.91')} returns a string value

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Phone code renders correctly

Given the user opens the Create Account page  
When the phone input field is displayed  
Then the country code "+91" should be visible  
And no React errors should occur

Scenario 2: No crash on render

Given translation files are loaded  
When the component renders t('common.91')  
Then it should return a string  
And the application should not crash

Test Cases

Test ID Test Description Precondition Test Steps Expected Result Priority
TC-001 Phone prefix render App loaded 1. Open Create Account
2. Check phone field		 "+91" is visible High
TC-002 No React error Console open 1. Load page No console errors High
TC-003 Multi-language check Language switch available 1. Change language
2. Reload page		 "+91" visible in all languages Medium

Unit Test Requirements

Components/Functions to Test:

Module/Component Function/Hook Test Cases to Cover
PhoneInput.tsx Render logic TC-001, TC-002
i18n config t() function TC-002

Test Assertions Required:

  • Renders correctly with initial state
  • No object returned from translation
  • No runtime errors
  • UI shows correct prefix

Implementation Details

Files to Change

File Path Action Purpose
src/locales/en/translations.json Modify Fix translation value
src/locales/te/translations.json Modify Fix translation value
src/locales/hi/translations.json Modify Fix translation value

Technical Considerations

  • Translation values used in UI must always be strings
  • Avoid returning objects unless explicitly handled
  • Maintain consistency across all language files

Testing Strategy

Manual Testing

  1. Open Create Account page
  2. Verify phone input field
  3. Confirm "+91" is displayed
  4. Check console for errors

Automated Testing

  • Component render tests
  • i18n validation tests

Definition of Done

  • Translation values updated to strings
  • No React rendering errors
  • UI displays correctly
  • Verified across all supported languages
  • No console warnings

Additional Context

Root cause: The translation key common.91 was incorrectly defined as an object instead of a string, causing React to fail during rendering.