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"
}

could you show your onSubmit method?

mez
– mez

2021-02-25 18:22:16 +00:00
Commented Feb 25, 2021 at 18:22 — mez
– mez, Commented Feb 25, 2021 at 18:22
@MezbaulHaque - I've added it to the OP

reactFullStackDeveloper
– reactFullStackDeveloper

2021-02-25 18:27:58 +00:00
Commented Feb 25, 2021 at 18:27 — reactFullStackDeveloper
– reactFullStackDeveloper, Commented Feb 25, 2021 at 18:27

mez · Accepted Answer · 2021-02-25 18:31:28Z

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);
    }
  };

answered Feb 25, 2021 at 18:31

mez

1,2829 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

reactFullStackDeveloper Over a year ago

Thanks! I was over complicating it by looking for a library solution when regular old JS does the trick. I re-arranged my values so that the field name that should contain systemId gets passed back.

Collectives™ on Stack Overflow

Using React-Select with React-Final-Form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related