React Final Form - Radio buttons won't work inside a FieldArray

Question

I have radio button group rendered dynamically using a FieldArray.

<FieldArray name="customers">
    {({ fields }) =>
    fields.map((name, index) => (
        <div key={name}>
        <label>Cust. #{index + 1}</label>
        <label>
            <Field
                name="picked"
                component="input"
                type="radio"
                value={index + 100}
            />{" "}
            Pick {index + 100}
        </label>

Clicking on the radio button updates the form values, however the button is not being selected in the UI. I am curious what is missing here.

{
  "customers": [
    {
      "firstName": "first_name_1",
      "lastName": "last_name_1"
    },
    {
      "firstName": "first_name_2",
      "lastName": "last_name_2"
    }
  ],
  "picked": "101"
}

Full code is here: https://codesandbox.io/s/react-final-form-field-arrays-with-radio-group-r7uz8y?file=/index.js:1482-1995

Example is based on https://final-form.org/docs/react-final-form/examples#field-arrays

Thank you for taking a look!

Answer 1

I read the document saying value can be any variable. But I tested with a string value (For example : <Field name="radio" type="radio" value="no" component="input" />No. It's working. So if you added an integer value, it'd not work expected. It'll work if you convert with this value={JSON.stringify(index + 100)}.

https://codesandbox.io/s/react-final-form-field-arrays-with-radio-group-forked-41lwoc

Answer 2

@ht13 give a solution, that's good. I want to say that the value should be "string" after the rendering. You can pass the value as an integer. Actually, the browser should show an error but sometimes, it'll fix or recognize it.