Set error on textinput if date is below a specified date react native

Question

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() - 18

const 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

Answer 1

I just needed to set a turnary operator for the age:

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 onChange = (event: any, selectedDate: Date) => {
    const currentDate = selectedDate || date;
    age < '18' ? setError(true) : setError(false);
    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: error ? "#ff3333" : "#000",
                        placeholder: error ? "#ff3333" : "#878787",
                        background: "#FFF"
                    }
                }}
            />
    </View>
);

}