I have successfully built a drop-down view for users to select their date of birth using dummy data. However, I am facing the challenge of implementing a data module for years/months/days using date-fns. Can anyone guide me on how to achieve this?
So far, I have created the drop-down component that works well with the dummy data. My main struggle is figuring out how to replace the dummy data with real date data.
Dropdown Component :
const days = [
{ num: '1', key: '1' },
{ num: '2', key: '2' },
{ num: '3 ', key: '3' },
{ num: '4', key: '4' },
{ num: '5 ', key: '5' },
];
const Dropdown = ({ label, data }) => {
const [selecteday, setSelecteday] = useState({ item: '' });
const DropdownButton = useRef();
const [visible, setVisible] = useState(false);
const toggleFunction = () => {
visible ? setVisible(false) : openDropdown();
};
const openDropdown = () => {
setVisible(true);
};
const onItemPress = item => {
setSelecteday(item);
console.log(item);
setVisible(false);
};
const renderItem = ({ item }) => (
<TouchableOpacity style={styles.item} onPress={() => onItemPress(item)}>
<Text style={styles.buttonText}>{item.num}</Text>
</TouchableOpacity>
);
const renderDropdown = () => {
return (
<SafeAreaView style={styles.dropdown}>
<FlatList
data={days}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
/>
</SafeAreaView>
);
};
return (
<>
<View style={{zIndex: 10}} >
<TouchableOpacity
onPress={() => toggleFunction()}
ref={DropdownButton}
style={styles.button}
>
<Text style={styles.buttonText}>
{' '}
{selecteday.item === '' ? label : selecteday.num}
</Text>
<MaterialCommunityIcons name="chevron-down" color={'#58abc8'} size={16} />
{visible == true ? renderDropdown() : null}
</TouchableOpacity>
</View>
{ visible ? <View
style={styles.modal}>
<TouchableOpacity
style ={styles.overlay}
onPress={toggleFunction}
></TouchableOpacity>
</View>: null}
</>
);
};