react select with react hook form cotroller
function Yourcomponent(props){ const methods = useForm(); const { handleSubmit } = methods; const options = [ { value: '1', label: 'Apple'}, { value: '2', label: 'Ball'}, { value: '3', label: 'Cat'}, ]; const default_value = 1; // you can replace with your default value // other codes of the component function submitHandler(formData){ // values are available in formData } return( <div> {* other part of your component *} <form onSubmit={handleSubmit(submitHandler)} > {* other part of your form *} <Controller control={methods.control} defaultValue={default_value} name="field_name_product" render={({ onChange, value, name, ref }) => ( <Select inputRef={ref} classNamePrefix="addl-class" options={options} value={options.find(c => c.value === value)} onChange={val => onChange(val.value)} /> )} /> {* other part of your form *} </form> {* other part of your component *} </div> ) }
