Условно отображать переменную состояния даты в тексте JSX

Question

Я пытаюсь создать функциональность, позволяющую пользователям выбирать дату с помощью DateTimePickerModal. Прежде чем что-либо будет выбрано, должно появиться интерактивное сообщение с надписью «Выбрать дату», которое затем будет заменено выбранной датой. Я не уверен, есть ли стандартный способ сделать это, но я думал об условном рендеринге Text вот так:

const AddActivityScreen = props => {
    const [startDate, setStartDate] = useState(null);
    const [mode, setMode] = useState('date');
    const [show, setShow] = useState(false);
    
    const showMode = currentMode => {
        setShow(true);
        setMode(currentMode);
    };

    const showDatepicker = () => {
        showMode('date');
    };

    const handleConfirm = (date) => {
        setStartDate(date);
        hidePicker();
    };

    const hidePicker = () => {
        setShow(false);
    };

    return (
        <View style={styles.container}>
            <DateTimePickerModal 
                isVisible={show}
                mode={mode}
                onConfirm={handleConfirm}
                onCancel={hidePicker}
            />
            <View>
                { startDate ? (
                    <Text onPress={showDatepicker}>{startDate}</Text> // something is going wrong here!
                ) : (
                    <Text onPress={showDatepicker}>Select a date</Text>
                )}
            </View>
        </View>
    );
};

Все работает, пока я не выберу дату, когда я получу следующую ошибку сообщение:

Ошибка DateTimePicker

Answer 1

Согласно документации пакета, который вы используете, возвращаемый date является стандартным объектом даты.

Если вы хотите отобразить его, вы должны преобразовать его в сначала строку, используя соответствующий метод форматирования.

Например:

<View>
     <Text onPress={showDatepicker}>{startDate ? startDate.toLocaleDateString("en-US") : "Select a date"}</Text>
</View>

Answer 2

Как говорится в сообщении об ошибке, объекты не могут быть отображены как дочерние по отношению к компоненту. Я предполагаю, что функция handleConfirm устанавливает дату начала для объекта, а не для строки. Я предлагаю попытаться преобразовать его в строку с помощью чего-то вроде:

<Text onPress={showDatepicker}>{JSON.stringify(startDate)}</Text>