Using React-Select with React-Final-Form

Question

I am using React-Select within React-Final Form. When an option is selected using React-Select it passes an object rather then a single value example {label: Foo, value: 100}. I only need to pass the "value" back to the server. In Redux-Forms you were able to do props.change(), but that doesn't seem to be an option with this React-Final-Forms. I've tried writing on onChange function to store things in state but when I do that the React-Select input no longer holds a value.

FORM

onSubmit = (data) => {
    if (data.incidentNumber) {
      //incident being
      this.props.incidentActions.editincident(data);
    } else {
      //new incident is being created
      this.props.incidentActions.createnewincident(data);
    }
  };

ReactSelectAdapter = ({ input, ...rest }) => (
    <Select {...input} {...rest} searchable />
  );

<Form
        onSubmit={this.onSubmit}
        render={({ handleSubmit, form, submitting, pristine, values }) => (
          <form onSubmit={handleSubmit}>
            <Row>
              <Col>
                <Label label="Water System" htmlFor="systemId" required />
                  <Field
                    name="systemId"
                    component={this.ReactSelectAdapter}
                    options={systems}
                    className="mb-2"
                  />
              </Col>
            </Row>
            .... more fields

EXAMPLE OF SUBMITTED FORM DATA:

 {
   "systemId":{"label":"ACME WATERSYSTEM","value":577},
   "description":"a water system"
}

How can I get it to only pass back:

{
   "systemId":577,
   "description":"a water system"
}

Answer 1

You could do some transformation inside onSubmit to get the desired format. Something like:

onSubmit = (data) => {
    data = {
        ...data,
        systemId: data.systemId ? data.systemId.value : null,
    };

    if (data.incidentNumber) {
      //incident being
      this.props.incidentActions.editincident(data);
    } else {
      //new incident is being created
      this.props.incidentActions.createnewincident(data);
    }
  };