0
I’m studying React and in particular a library to create forms that is Unform, was managing to create the Components until I came across a problem. select is integrated with the React-select library but the documentation example is in typescript and my cli from React is in the default js, so the code presents some differences that I can not understand and adjust, would like to know how this chunk of code would look without typescript.
import React, { useRef, useEffect } from 'react';
import { OptionTypeBase } from 'react-select';
import Select, { Props as AsyncProps } from 'react-select/async';
import { useField } from '@unform/core';
interface Props extends AsyncProps<OptionTypeBase> {
name: string;
}
const AsyncSelect: React.FC<Props> = ({ name, ...rest }) => {
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.select.state.value) {
return [];
}
return ref.select.state.value.map(
(option: OptionTypeBase) => option.value,
);
}
if (!ref.select.state.value) {
return '';
}
return ref.select.state.value.value;
},
});
}, [fieldName, registerField, rest.isMulti]);
return (
<Select
cacheOptions
defaultValue={defaultValue}
ref={selectRef}
classNamePrefix="react-select"
{...rest}
/>
);
};
export default AsyncSelect;
Thanks for the answer, I’m starting now in this world of JS and everything is very new to me.
– Paulo Henrique N matos