Evergreen farms (pos)

Root cause : When editing an existing customer who has no email address or phone number stored in the database, the arrays emails and contactDetails are set to empty arrays []. However, the input fields in the JSX are hardcoded to bind to index 0 (e.g. emails⁰). Typing in the fields called handleEmailChange or handleContactChange at index 0. Because updatedEmails⁰ was undefined, setting properties on it caused the page to crash with: TypeError: Cannot set properties of undefined (setting 'email')

Solution :1. The Safety Check is Conditional
The check we introduced (if (!updatedEmails[index])) is a conditional guard. It only runs if the element at the specified index is missing (i.e. undefined):

typescript

const updatedEmails = [...emails];
if (!updatedEmails[index]) {
updatedEmails[index] = { email: '' }; // Only runs if undefined
}
updatedEmails[index][field] = value;
For existing customers who already have emails:

emails is already populated during page load (e.g. [{ email: 'test1@gmail.com' }, { email: 'test2@gmail.com' }]).
When typing in the first input (index 0), updatedEmails⁰ is { email: 'test1@gmail.com' } (truthy).
The if block is bypassed entirely, and it directly updates the value just like the original code did.
This means the data-flow and state update logic for all existing records remains 100% identical to the original working code.
2. State Mutation Pattern is Unchanged
We kept the exact same shallow array copying ([...emails]) and mutation patterns that the application has been using since its creation. There are no side-effects or reference sharing issues introduced by our change.

Every existing record will load, display, edit, validate, and save exactly as before.