How to update previous state to a new date

Question

I'm working on a react-native project and I am using mmazzarolo/react-native-modal-datetime-picker

To change state I am doing this,

export default = () => {
const [getDate, setGetDate] = useState(null)
const [isDatePickerVisible, setDatePickerVisible] = useState(false)

const showDatePicker = () => setDatePickerVisible(true);
const hideDatePicker = () => setDatePickerVisible(false);

const handleConfirm = (date) => {
    setGetDate(format(new Date(date), 'MM/dd/yyy'));
    hideDatePicker();
  }
}

//This is how I'm implementing the datepicker with React Hook Form.
{isDatePickerVisible ? (
 <Controller
    control={control}
    render={({ onChange, onBlur, value }) => (
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
       />
     )}
     name="apptDate"
     rules={{ required: true }}
     defaultValue=""
      />
   ) : ( 
      <Controller
        control={control}
        render={({ onChange, onBlur, value }) => (
          <TextInput
            style={styles.input}
            onTouchEnd={showDatePicker}
            onChangeText={value => onChange(value)}
            value={getDate}
          />
        )}
        name="apptDate"
        rules={{ required: true }}
        defaultValue=""
      />
     )
}

When I open the modal and press Confirm on today's date (the current date) it returns null but after the second time I get the date I want.

I believe it's because I'm not updating the previous state using the function way to update the state and I'm having trouble figuring out how to update the previous state of null to the new Date() as a function.

I suspect your question might be a duplicate of this https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately — Nadia Chibrikova, Jan 30 '21 at 18:14
Could you provide all code of your component to see problem? — Konstantin Modin, Jan 30 '21 at 18:38

Thomas Jiang · Answer 1 · 2021-02-24T18:05:46.050

Please check the following code.

Does your code look like this?

import React, {useState} from 'react';
import {
  Text,
  StatusBar,
  TouchableOpacity,
  SafeAreaView,
  StyleSheet,
} from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import {format} from 'date-fns';

const App = () => {
  const [isDatePickerVisible, setDatePickerVisible] = useState(false);
  const [getDate, setGetDate] = useState(null);
  const showDatePicker = () => setDatePickerVisible(true);

  const hideDatePicker = () => setDatePickerVisible(false);

  const handleConfirm = (date) => {
    setGetDate(format(new Date(date), 'MM/dd/yyy'));
    hideDatePicker();
  };

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.container}>
        <TouchableOpacity onPress={showDatePicker} style={styles.button}>
          <Text>Open Date Time Picker</Text>
        </TouchableOpacity>
        <Text>{getDate}</Text>
        <DateTimePickerModal
          isVisible={isDatePickerVisible}
          mode="date"
          onConfirm={handleConfirm}
          onCancel={hideDatePicker}
        />
      </SafeAreaView>
    </>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    backgroundColor: 'grey',
    padding: 20,
    marginBottom: 20,
  },
});

You can find whole project from my github.

Yeah, this is close to what I have. I'm using react-hook-form to have a textInput to open the modal and display the date inside it. I'm trying to do exactly what you do with the first selection — mwl, Jan 30 '21 at 20:21
I've updated the question to included my code(from memory I'll have to look tomorrow at work) that I'm working with. Using React Hook Form along with it. — mwl, Jan 31 '21 at 16:28

How to update previous state to a new date

1 Answers1