/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 vote147 views1 answer
React native panresponder on click
Javascript React
5 votes116 views1 answer
React dom
Javascript React
0 vote125 views1 answer
React native fade in fade out animation
Javascript React
2 votes122 views1 answer
What is virtual dom in react
Javascript React
11 votes139 views3 answers
React app and tailwind
Javascript React
93 votes207 views6 answers
Install react router dom
Javascript React
0 vote120 views1 answer
React focus textarea
Javascript React
4 votes141 views1 answer
How to add custom font to react project
Javascript React
0 vote123 views1 answer
Inline style to change background color react
Javascript React
0 vote162 views2 answers
How to use react typed js
Javascript React