Currently the default setting of the button title is 'SELECT DATE', I would like this title to change to 'YYYY-MM-DD' based on the value chosen in the datepicker. I used { selectedDate ? </> : </> } conditioning on the title but it wouldn't change even if I change it to a hard-coded title like 'NEW DATE' as if the condition is never met. What am I missing or doing wrong with the conditioning?

import React, { useState } from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';
import { Button, Platform, StyleSheet, View } from 'react-native';

function AppDatePicker({ selectedDate }) {
    const [date, setDate] = useState(new Date());
    const [mode, setMode] = useState('date');
    const [show, setShow] = useState(false);

    const onChange = ({ selectedDate }) => {
        const currentDate = selectedDate || date;
        setShow(Platform.OS === 'ios');
        setDate(currentDate);

        let tempDate = new Date(currentDate);
        let fDate = tempDate.getFullYear()   '-'   (tempDate.getMonth()   1)   '-'   tempDate.getDate();
        console.log(fDate)
    }

    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    }

    return (
        <View>
            <View style={styles.button}>
                {
                    selectedDate ? (
                        <Button
                            onPress={() => showMode('date')}
                            title={fDate.toString()}>
                        </Button>
                    ) : (
                        <Button
                            onPress={() => showMode('date')}
                            title="Select Date">
                        </Button>
                    )
                }
            </View>
            {show && 
                <DateTimePicker
                    value={date}
                    mode={mode}
                    display='default'
                    onChange={onChange}>
                </DateTimePicker>
            }
        </View>
    );
}

const styles = StyleSheet.create({
    button: {
        margin: 20,
    },
})

export default AppDatePicker;

CodePudding user response：

The variable selectedDate is not a state. It is the input parameter of the function onChange (and a prop of AppDatePicker? I fail to see where this is used in the current code). Since the selected date is represented by the state date, you can use this instead.

However, since date is never undefined, we need to find another mechanism here. I would create a state that holds the title property and change it according to the picked date.

It seems to me that the onChange function of the component that you are using is receiving two parameters called event and date. You are destructuring selectedDate in your onChange function which does not exist.

I have fixed this as well.

Furthermore, it is not necessary to use two button instances if we want to change the title only.

function AppDatePicker() {
    const [date, setDate] = useState(new Date());
    const [mode, setMode] = useState('date');
    const [show, setShow] = useState(false);
    const [title, setTitle] = useState("Select Date");

    const onChange = (selectedDate) => {
        const currentDate = selectedDate || date;
        setShow(Platform.OS === 'ios');
        setDate(currentDate);

        let tempDate = new Date(currentDate);
        let fDate = tempDate.getFullYear()   '-'   (tempDate.getMonth()   1)   '-'   tempDate.getDate();
        console.log(fDate)
  
        setTitle(fDate.toString())
    }

    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    }

    return (
        <View>
            <View style={styles.button}>
                <Button
                   onPress={() => showMode('date')}
                   title={title}>
                </Button>
            </View>
            {show && 
                <DateTimePicker
                    value={date}
                    mode={mode}
                    display='default'
                    onChange={(_, date) => onChange(date)}>
                </DateTimePicker>
            }
        </View>
    );
}