I made custom dropdown component using model and flatlist.but its showing error(Property 'label' does not exist on type 'never') and its not working properly. component code below here is whole block for that componenet part
interface Props {
label: string;
data: Array<{label: string; value: string}>;
onSelect: (item: {label: string; value: string}) => void;
selected?: undefined;
}
const Dropdown: FC<Props> = ({label, data, onSelect}: any) => {
const DropdownButton = React.useRef() as React.MutableRefObject<any>;
const [visible, setVisible] = useState(false);
const [selected, setSelected] = useState(undefined);
const [dropdownTop, setDropdownTop] = useState(0);
const toggleDropdown = (): void => {
visible ? setVisible(false) : openDropdown();
};
const openDropdown = (): void => {
DropdownButton.current.measure(
(_fx: any, _fy: any, _w: any, h: any, _px: any, py: any) => {
setDropdownTop(py + h);
},
);
setVisible(true);
};
const onItemPress = ({item}: any): void => {
setSelected(item);
onSelect(item);
setVisible(false);
};
const renderItem = ({item}: any): ReactElement<any, any> => (
<TouchableOpacity style={styles.item} onPress={() => onItemPress(item)}>
<Text>{item.label}</Text>
</TouchableOpacity>
);
const renderDropdown = (): ReactElement<any, any> => {
return (
<Modal visible={visible} transparent animationType="none">
<TouchableOpacity
style={styles.overlay}
onPress={() => setVisible(false)}>
<View style={[styles.dropdown, {top: dropdownTop}]}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</TouchableOpacity>
</Modal>
);
};
return (
<TouchableOpacity
ref={DropdownButton}
style={styles.button}
onPress={toggleDropdown}>
{renderDropdown()}
<Text style={styles.buttonText}>
{(selected && selected.label) || label}
</Text>
<Icon
style={styles.icon}
type="font-awesome"
name="chevron-down"
tvParallaxProperties={undefined}
/>
</TouchableOpacity>
);
};
and its usage below :-
const [selected, setSelected] = useState(undefined);
const data = [
{label: 'One', value: '1'},
{label: 'Two', value: '2'},
{label: 'Three', value: '3'},
{label: 'Four', value: '4'},
{label: 'Five', value: '5'},
];
return <Dropdown label="Select Item" data={data} onSelect={setSelected} />;
main error:- after clicking value in dropdown its not showing as selected.