reactjsreact-final-formreact-final-form-arrays

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


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

enter image description here

Thank you for taking a look!


Solution

  • 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

    enter image description here