How to add a react-select dropdown with react-hook-form in React

by Clue Mediator · January 5, 2023

In this article, we will show you how to add a react-select dropdown with react-hook-form in React. Similarly, you can implement other packages with a React Hook Form.

Here, we will continue the previous article so advise you to go through that article.

Validate a form in React using react-hook-form

Demo Application

Add a react-select dropdown with react-hook-form in React

Create a simple form
Add a react-select dropdown in form
Output

1. Create a simple form

Refer to the following articles, If you don’t know how to create a form using react-hook-form.

2. Add a react-select dropdown in form

Here, we’ll use the react-select npm package to add the dropdown in the form.

To add the third party package, we have to use the useController from the react-hook-form.

const { field } = useController({ name: 'language', control });
const { value: langValue, onChange: langOnChange, ...restLangField } = field;

// OR

const { field: { value: langValue, onChange: langOnChange, ...restLangField } } = useController({ name: 'language', control });

const { field } = useController({ name: 'language', control });

const { value: langValue, onChange: langOnChange, ...restLangField } = field;

// OR

const { field: { value: langValue, onChange: langOnChange, ...restLangField } } = useController({ name: 'language', control });

As you can see in the above code, we have used the control in the useController. So don’t forget to export control from the useForm().

Now, let’s use the above exported method in the react-select.

<Select
  className='select-input'
  placeholder="Select Language"
  isClearable
  options={languageList}
  value={langValue ? languageList.find(x => x.value === langValue) : langValue}
  onChange={option => langOnChange(option ? option.value : option)}
  {...restLangField}
/>

<Select

className='select-input'

placeholder="Select Language"

isClearable

options={languageList}

value={langValue ? languageList.find(x => x.value === langValue) : langValue}

onChange={option => langOnChange(option ? option.value : option)}

{...restLangField}

3. Output

Let’s put all the code together and see how it looks.

App.js

import React, { useState } from 'react';
import { useForm, useController } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";
import Select from 'react-select';

const schema = yup.object({
  name: yup.string().required("Please enter name"),
  email: yup.string().email("Please enter valid email").required("Please enter email"),
  website: yup.string().url("Please enter valid url").required("Please enter url"),
  language: yup.number().nullable().required("Please select language"),
});

const languageList = [
  { value: 1, label: 'English' },
  { value: 2, label: 'Hindi' }
];

function App() {
  const [data, setData] = useState();
  const { register, handleSubmit, formState, control } = useForm({
    resolver: yupResolver(schema)
  });

  const { field: { value: langValue, onChange: langOnChange, ...restLangField } } = useController({ name: 'language', control });

  const { errors } = formState;

  const onSubmit = (formData) => {
    setData({ ...formData });
  }

  return <form onSubmit={handleSubmit(onSubmit)}>
    <h4>Add a react-select dropdown with react-hook-form - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h4>
    <div>
      <label>Name</label>
      <input
        placeholder='Name'
        {...register('name')}
      />
      {errors.name && <p>{errors.name.message}</p>}
    </div>
    <div>
      <label>Email</label>
      <input
        placeholder='Email'
        {...register('email')}
      />
      {errors.email && <p>{errors.email.message}</p>}
    </div>
    <div>
      <label>Website</label>
      <input
        placeholder='Website'
        {...register('website')}
      />
      {errors.website && <p>{errors.website.message}</p>}
    </div>
    <div>
      <label>Language</label>
      <Select
        className='select-input'
        placeholder="Select Language"
        isClearable
        options={languageList}
        value={langValue ? languageList.find(x => x.value === langValue) : langValue}
        onChange={option => langOnChange(option ? option.value : option)}
        {...restLangField}
      />
      {errors.language && <p>{errors.language.message}</p>}
    </div>
    <div>
      <button>Submit</button>
    </div>
    {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
  </form>
}

export default App;

import React, { useState } from 'react';

import { useForm, useController } from 'react-hook-form';

import { yupResolver } from '@hookform/resolvers/yup';

import * as yup from "yup";

import Select from 'react-select';

const schema = yup.object({

name: yup.string().required("Please enter name"),

email: yup.string().email("Please enter valid email").required("Please enter email"),

website: yup.string().url("Please enter valid url").required("Please enter url"),

language: yup.number().nullable().required("Please select language"),

});

const languageList = [

{ value: 1, label: 'English' },

{ value: 2, label: 'Hindi' }

];

function App() {

const [data, setData] = useState();

const { register, handleSubmit, formState, control } = useForm({

resolver: yupResolver(schema)

});

const { field: { value: langValue, onChange: langOnChange, ...restLangField } } = useController({ name: 'language', control });

const { errors } = formState;

const onSubmit = (formData) => {

setData({ ...formData });

}

return <form onSubmit={handleSubmit(onSubmit)}>

<h4>Add a react-select dropdown with react-hook-form - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h4>

<div>

<input

placeholder='Name'

{...register('name')}

{errors.name && <p>{errors.name.message}</p>}

</div>

<div>

<label>Email</label>

<input

placeholder='Email'

{...register('email')}

{errors.email && <p>{errors.email.message}</p>}

</div>

<div>

<label>Website</label>

<input

placeholder='Website'

{...register('website')}

{errors.website && <p>{errors.website.message}</p>}

</div>

<div>

<label>Language</label>

<Select

className='select-input'

placeholder="Select Language"

isClearable

options={languageList}

value={langValue ? languageList.find(x => x.value === langValue) : langValue}

onChange={option => langOnChange(option ? option.value : option)}

{...restLangField}

{errors.language && <p>{errors.language.message}</p>}

</div>

<div>

<button>Submit</button>

</div>

{data && <pre>{JSON.stringify(data, null, 2)}</pre>}

</form>

}

export default App;

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project

If you found value in this article,
you can support us by buying me a coffee! ☕

How to add a react-select dropdown with react-hook-form in React

Demo Application

Add a react-select dropdown with react-hook-form in React

1. Create a simple form

2. Add a react-select dropdown in form

3. Output

Demo & Source Code

You may also like...

2 Responses

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Join us

How to add a react-select dropdown with react-hook-form in React

Demo Application

Add a react-select dropdown with react-hook-form in React

1. Create a simple form

2. Add a react-select dropdown in form

3. Output

Demo & Source Code

You may also like...

React-Select Async Dropdown using Search API

useState with object in React Hooks

Input validation in React

Export data to CSV in React

How to play an mp3 file in ReactJS

Implement idle timeout popup in React

2 Responses

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Tags

Join us