/Javascript/React/React select with react hook form cotroller

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

Source: stackoverflow.com

Similar codes

5 votes211 views2 answers
Lazy loading react
Javascript React
18 votes238 views6 answers
Uselocation react
Javascript React
0 vote225 views2 answers
React-native local image not showing ios
Javascript React
0 vote261 views1 answer
React-native-image-viewing
Javascript React
0 vote213 views1 answer
React pass parameters to other page
Javascript React
25 votes319 views5 answers
Image react
Javascript React
13 votes283 views3 answers
React native conditional rendering
Javascript React
1 vote206 views1 answer
How to update version of dependencies reactjs
Javascript React
18 votes222 views6 answers
How to import svg in react
Javascript React
26 votes179 views4 answers
React context
Javascript React