How to change the value of one input field based on what is entered in another in REACT FINAL FORM?

Question

Here is the Final Form Code,

I want to display the end date based on the number of nights and the start date entered. I have highlighted it in the code as well.

Currently, I have to press enter after adding the number of nights to see the update in trip end date, and on changing the start dates I get no change.

Parent component Code:

 let tripEndDate = new Date(
    startDateInMilliseconds ? moment(new Date(startDateInMilliseconds)) : null
  );
  let nights = tripDetails ? tripDetails.nights : null;
  tripEndDate.setDate(tripEndDate.getDate() + parseInt(nights));
  tripEndDate = moment(new Date(tripEndDate).toISOString().split('T')[0]).format('YYYY-MM-DD');
  return (
    <div className={classes}>
      <h1 className={css.title}>{panelTitle}</h1>
      <EditDescriptionForm
        className={css.form}
        initialValues={{
          title,
          description,
          startDate: startDateInMilliseconds
            ? moment(new Date(startDateInMilliseconds).toISOString().split('T')[0]).format(
                'YYYY-MM-DD'
              )
            : null,
          nights: tripDetails ? tripDetails.nights : null,
          tripEndDate: tripEndDate,
        }}
        onSubmit={values => {
          const {
            startDate,
            nights,
          } = values;
            onSubmit({
              publicData: {
                tripDetails: {
                  nights,
                },
                //start date in milliseconds is placed outside tripDetails so that it can be used in query
                startDateInMilliseconds: new Date(startDate).getTime(),
              },
            });
          }
        }}
        onChange={onChange}
        />
    </div>
  );
};

Form Component:

import React from 'react';
import { Form as FinalForm } from 'react-final-form';

const EditDescriptionFormComponent = props => {
  return (
    <FinalForm
      {...props}
      mutators={{ ...arrayMutators }}
      render={formRenderProps => {
        const {
          className,
          disabled,
          ready,
          handleSubmit,
          invalid,
          pristine,
          updated,
          updateInProgress,
          fetchErrors,
          filterConfig,
        } = formRenderProps;

        const classes = classNames(css.root, className);
        const submitReady = (updated && pristine) || ready;
        const submitInProgress = updateInProgress;
        const submitDisabled = invalid || disabled || submitInProgress;

        return (
          <Form className={classes} id={css.formSection} onSubmit={handleSubmit}>
                <FieldTextInput
                  id="startDate"
                  name="startDate"
                  type="date"
                  min={new Date().toISOString().split('T')[0]}
                />
                <FieldTextInput
                  id="nights"
                  name="nights"
                  type="number"
                  min="0"
                />

                 <FieldTextInput
                  id="tripEndDate"
                  name="tripEndDate"
                  className={css.field}
                  type="date"
                  label="Trip End Date"
                  disabled
                />                            {/*I want to show the end date calculated from the start date and the number of nights here*/}

            <Button
              type="submit"
              inProgress={submitInProgress}
              disabled={submitDisabled}
              ready={submitReady}
            >
              SAVE
            </Button>
          </Form>
        );
      }}
    />
  );
};


export default compose(EditDescriptionFormComponent);

Answer 1

You could leverage the companion library final-form-calculate which could on the fly set the endDate based on the other fields. They have an example in the docs to give you an idea of how that might work. https://final-form.org/docs/react-final-form/examples#calculated-fields