1
Create a basic form in React using react-final-form
3m 25s
2
Disallow Submitting an Empty Form with React Final Form 'pristine' property
1m 20s
3
Avoid Submitting a Form Twice with React Final Form 'submitting' property
1m 26s
4
Use third party components (e.g. React Select) in React Final Form
1m 56s
5
Validate form values with React Final Form 'validate' function
3m 13s

Use third party components (e.g. React Select) in React Final Form

React

Share this video with your friends

No one wants to reinvent the wheel.

That's why it's so important to be able to use components that someone else had created and put on npm. In this lesson we are going to learn how to use third party React Select in a React Final Form form to create a searchable select form field.

Course

Create forms in React applications with React Final Form

CXP

~ 5 years ago

I see that we just have {...input} {...props} being sent to the Select field, can we add some of the custom props from Select like formatOptionLabel or onChange?

Ian Jones

~ 5 years ago

@CXP you can pass any props to the Field component and the {...rest} option in ReactSelectAdapter will apply it to the component for you:

<Field
            name="library"
            component={ReactSelectAdapter}
            options={libraries}
            onChange={() => console.log('nice')} // this will fire on ever onChange event
          />

CXP

~ 5 years ago

We had issues using component={ReactSelectAdapter} and then getting the react-select field's new value linked up properly, so we ended up using react-final-form's render instead of component.