How to add object to react-final-form field name dynamically?

Question

This react-final-form component will return the following result

<Field
   name="answers[0].name"
   component="input"
   type="radio"
   value="0"
/>


{ answers: [ { name: 'value' } ] } 

How to add another property? that will end like This

{ answers: [ { name: 'user input value will here', other: 'my custom data' } ] } 

According to final-form you can name your field component in 4 ways

Answer 1

You can add an initialValues prop to the form which will pre-populate the result.

<Form
    onSubmit={onSubmit}
    initialValues={{
        answers: [ { other: 'your custom data' } ]
    }}
>
    <Field
        name="answers[0].name"
        component="input"
        type="text"
    />
</Form>