Hey guys i'm trying to use select component with unform and in their documentation is recommended to use React-select, they recommend create my own custom Select with this code:
import React, { useRef, useEffect } from 'react';
import ReactSelect, {
OptionTypeBase,
Props as SelectProps,
} from 'react-select';
import { useField } from '@unform/core';
interface Props extends SelectProps<OptionTypeBase> {
name: string;
}
export default function Select({ name, ...rest }: Props) {
const selectRef = useRef(null);
const { fieldName, defaultValue, registerField, error } = useField(name);
useEffect(() => {
registerField({
name: fieldName,
ref: selectRef.current,
getValue: (ref: any) => {
if (rest.isMulti) {
if (!ref.state.value) {
return [];
}
return ref.state.value.map((option: OptionTypeBase) => option.value);
}
if (!ref.state.value) {
return '';
}
return ref.state.value.value;
},
});
}, [fieldName, registerField, rest.isMulti]);
return (
<ReactSelect
defaultValue={defaultValue}
ref={selectRef}
classNamePrefix="react-select"
{...rest}
/>
);
};
but I can't use Options props in the select component in my form and i don't know other way to put my options in the select, can you guys help me please?