How to implement react flags select With React hook form

[mernaff18]

How to implement react flags select With React hook form

[pschelte]

Hello,
after a lot of searches, I finally found a way to implement it :

import { useForm, Controller } from "react-hook-form";
import ReactFlagsSelect from 'react-flags-select';
...
    const [country, setCountry] = useState('');
...
    const { control, register, formState: { errors }, handleSubmit } = useForm();
...
                                    <label className="label">
                                        {t('country')}
                                        <span style={{color: 'red'}}>&nbsp;*</span>
                                    </label>
                                    <div className="controls">
                                        <Controller 
                                            name="country"
                                            control={control}
                                            rules={{ required: true }}
                                            render={({ field: { onChange, value } }) => (
                                                <ReactFlagsSelect
                                                    selected={country}
                                                    onSelect={code => {
                                                        onChange(code);
                                                        setCountry(code);
                                                    }}
                                                    value={value}
                                                    placeholder= {t('select-country')}
                                                />
                                            )}
                                        />
                                        <p className="help is-danger">
                                            {errors.country?.type === 'required' && t('select-country')}
                                        </p>
                                    </div>
...

Hope it will help !

[kamaladenalhomsi]

Hello, after a lot of searches, I finally found a way to implement it :

import { useForm, Controller } from "react-hook-form";
import ReactFlagsSelect from 'react-flags-select';
...
    const [country, setCountry] = useState('');
...
    const { control, register, formState: { errors }, handleSubmit } = useForm();
...
                                    <label className="label">
                                        {t('country')}
                                        <span style={{color: 'red'}}>&nbsp;*</span>
                                    </label>
                                    <div className="controls">
                                        <Controller 
                                            name="country"
                                            control={control}
                                            rules={{ required: true }}
                                            render={({ field: { onChange, value } }) => (
                                                <ReactFlagsSelect
                                                    selected={country}
                                                    onSelect={code => {
                                                        onChange(code);
                                                        setCountry(code);
                                                    }}
                                                    value={value}
                                                    placeholder= {t('select-country')}
                                                />
                                            )}
                                        />
                                        <p className="help is-danger">
                                            {errors.country?.type === 'required' && t('select-country')}
                                        </p>
                                    </div>
...

Hope it will help !

Works like a charm!
Thanks man, saved me a lot of time.