React Final Form: Handling Complex Nested Form State with Dynamic Fields
I'm integrating two systems and I'm confused about Hey everyone, I'm running into an issue that's driving me crazy... I'm working on a form using React Final Form where I need to handle complex nested objects dynamically. The form allows users to add multiple addresses, and each address can have its own set of fields like street, city, and zip code. However, I'm running into issues when trying to update the state of these dynamically added fields. Here’s a simplified version of what I have: ```javascript import React from 'react'; import { Form, Field, FieldArray } from 'react-final-form'; const AddressForm = () => { return ( <Form onSubmit={formValues => console.log(formValues)} render={({ handleSubmit }) => ( <form onSubmit={handleSubmit}> <FieldArray name="addresses"> {({ fields }) => ( <div> <button type="button" onClick={() => fields.push({})}>Add Address</button> {fields.map((name, index) => ( <div key={name}> <h4>Address #{index + 1}</h4> <Field name={`${name}.street`} component="input" placeholder="Street" /> <Field name={`${name}.city`} component="input" placeholder="City" /> <Field name={`${name}.zip`} component="input" placeholder="Zip Code" /> <button type="button" onClick={() => fields.remove(index)}>Remove</button> </div> ))} </div> )} </FieldArray> <button type="submit">Submit</button> </form> )} /> ); }; ``` However, when I attempt to submit the form after adding several addresses, I receive the following behavior in the console: `behavior: want to read properties of undefined (reading 'street')`. This behavior suggests that the nested structure is not being populated correctly when submitting, especially if I’ve added and removed addresses dynamically. I’ve tried debugging by logging the values of `fields` and inspecting the state, but it seems the `FieldArray` is not maintaining the correct structure. I've also ensured that I’m using the latest version of React Final Form (v6.5.0). Can anyone guide me on how to properly manage the nested state for dynamic fields in React Final Form? Are there specific patterns or examples that can guide to resolve this scenario? I'm working on a application that needs to handle this. Is there a better approach? I'm working on a desktop app that needs to handle this. I'm open to any suggestions. For context: I'm using Javascript on Debian.