react final form conditional form fields are not getting values while rendered

Question

I have a field in a form that I want to render based on another field's value.

I listen to "OnChange" event of the field, and then trigger form.change of the new field (which is not rendered yet), but it won't get the value while rendered.

I created a sandbox for the issue: https://codesandbox.io/embed/priceless-keldysh-gfd3b

THe expected result: when selecting "Heat", scaling factor should be displayed and get the value '1'

What is the best practice to solve that? assuming there are a lot of dependencies inside a form.

Yu-Jhau Peng Yu-Jhau Peng · Accepted Answer · 2019-10-03T09:36:37

Since <Form /> need visible <Field /> for subscribe

but your field scalingFactor would be removed when values.meterType !== "heat"

{values.meterType && values.meterType === "heat" && (
  <Field name="scalingFactor" component="input" />
)}

You need to change your code as bellow:

<Field name="scalingFactor">
  {({ input }) => {
    return (
      <React.Fragment>                    
        {values.meterType && values.meterType === "heat" &&
          <input {...input} />
        }
      </React.Fragment>
    );
  }}
</Field>

react final form conditional form fields are not getting values while rendered

1 Answers