I am trying to make an age text input for my app that if you are below 18 sets an error state and changes color. Here is my code:
function AgeButton() {const [age, setAge] = useState('');const [date, setDate] = useState(new Date(1598051730000));const [modalVisible, setModalVisible] = useState(false);const [error, setError] = useState(false);const {header, modal, bottomModalView} = styles;const today = new Date()const minimumAgeYear = today.getFullYear() - 18const onChange = (event: any, selectedDate: Date) => { const currentDate = selectedDate || date; // if (currentDate.getFullYear() > minimumAgeYear) { // return setError(true); // } setDate(currentDate); setAge(AgeCalculator(date));};return (<View><Modal style={bottomModalView} isVisible={modalVisible} backdropOpacity={0} onBackdropPress={() => setModalVisible(false)}><View style={modal}><DateTimePicker style={{alignItems: 'center', justifyContent: 'center', height: '70%'}} testID="dateTimePicker" value={date} mode={'date'} display="spinner" // @ts-ignore onChange={onChange} // maximumDate={new Date(minimumAgeYear, today.getMonth(), today.getDay())} textColor='#878787' /><Text style={header}>How old are you?</Text></View></Modal><TextInput onTouchStart={() => setModalVisible(true)} editable={false} autoComplete mode="outlined" label="Age" value={age} onChangeText={age => setAge(age)} style={{maxHeight: 64, minWidth: '47%', marginRight: 16}} activeOutlineColor={"#000"} outlineColor={error ? '#ff3333' : (modalVisible ? "#000" : "#DBDBDB")} theme={{ colors: { text: "#000", placeholder: error ? "#ff3333" : "#878787", background: "#FFF" } }} /></View>);}
I have got to the point where I could get the age to error if below 18 however I cannot get it to change if the input changes. Any help in how to do this would be great as originally I tried to just set an maximumDate on the DateTimePicker however this impacts UX as if a user picked their DOB the wrong way round the spinner would not let them