/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

86 votes402 views3 answers
React check if window exists
Javascript React
0 vote391 views1 answer
How to use adminlte in reacts
Javascript React
-2 votes354 views1 answer
React timepicker example
Javascript React
2 votes367 views2 answers
React native open gmail app
Javascript React
16 votes392 views2 answers
Render text in for loop react in function
Javascript React
0 vote353 views1 answer
CocoaPods could not find compatible versions for pod "React/Core": In Podfile: react-native-fetch-blob (from `../node_modules/react-native-fetch-blob`) was resolved to 0.10.6, which depends on React/Cor
Javascript React
1 vote354 views2 answers
React-native array.filter by index arrow function
Javascript React
0 vote378 views1 answer
React native unexpected token '<'
Javascript React
0 vote371 views1 answer
Ant design not working in react js
Javascript React
0 vote369 views1 answer
React native firebase login with facebook
Javascript React