CODEWITHSUNDEEP
react-selectreact-final-form
CoderNewb
CoderNewb

Reputation: 31

How can I get react-select to integrate properly with react-final-form

I'm using react-final-form to send along some basic user data. First name, last name, email and a dropdown value with a reason why they're contacting me. I tried the following (the custom input section on react-final-form's docs):

<Field name="myField">
  {props => (
    <div>
      <Select
        options={colourOptions}
        className="basic-multi-select"
        classNamePrefix="select"
        onChange={props.input.onChange}
       />
    </div>
  )}
</Field>

My guess is maybe there's some collision with the onChange prop? Not sure, but the information in the dropdown is not being picked up by react-final-form and pass along to the <form> on submit.

Upvotes: 3

Views: 3871

Answers (3)

Nagween Jaffer
Nagween Jaffer

Reputation: 180

in a simple way I have done it like this:

 const locationOptions = [
        { value: 1, label: "ADEN" },
        { value: 2, label: "MUKALLA" },
        { value: 3, label: "TAIZ" },
      ];
<Field name="location_id">
              {({ input }) => (
                <Select
                  options={locationOptions}
                  placeholder="Select Location"
                  {...input}
                />
              )}
</Field>

the on submit method:

const onSubmit = (data) => {
    console.log(data);
  };

Upvotes: 0

JIm
JIm

Reputation: 97

Here my approach. I decided problem with initial values and value which will sent to server. Just like:

{selectFieldId: "value"}

import React from "react";
import { FieldRenderProps } from "react-final-form";
import Select, { ValueType } from "react-select";

type Option = {
    label: string;
    value: string;
};

export const CustomSelect = ({ input, options, ...rest }: FieldRenderProps<string, HTMLElement>) => {

    const handleChange = (option: ValueType<Option, false>) => {
        input.onChange(option?.value);
    };

    return (
            <Select
                {...input}
                {...rest}
                onChange={handleChange}
                options={options}
                value={options ? options.find((option: Option) => option.value === input.value) : ""}
            />
    );
};

export default CustomSelect;

Upvotes: 1

jupiteror
jupiteror

Reputation: 1205

There is an example on how to use react-select with react-final-form: https://codesandbox.io/s/40mr0v2r87.

You should add an adapter:

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

And then you can use it as a component:

<Field
  name="state"
  component={ReactSelectAdapter}
  options={states}
/>

Upvotes: 2

Related Questions