/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

0 vote313 views1 answer
Image continuous changing div react
Javascript React
0 vote310 views1 answer
React native get uri of the image in the app assets folder
Javascript React
0 vote324 views1 answer
Sort Array Object in React
Javascript React
2 votes340 views2 answers
Discord.js remove reaction
Javascript React
0 vote249 views1 answer
React native cross out letter
Javascript React
20 votes295 views2 answers
React localstorage
Javascript React
133 votes460 views6 answers
Create react project
Javascript React
114 votes349 views3 answers
React init
Javascript React
7 votes287 views2 answers
Uuid v4 react
Javascript React
0 vote283 views1 answer
Reference hook in react
Javascript React