Changing to hooks crash at 'displayedDate'

[poPaTheGuru]

If you are trying to write the code for React Hooks the module will crash at 'displayedDate'.

My code:

const [date, setDate] = useState({ startDate: null, endDate: null, displayedDate: moment() })

    const setDates = dates => {
        setDate({ ...dates })
    }

<DateRangePicker
         open={open}
         onChange={dates => setDates(dates)}
         endDate={date.startDate}
         startDate={date.endDate}
         displayedDate={date.displayedDate}
         range
/>

After the component is opened, when you click on a date will throw the next error:

TypeError: undefined is not an object (evaluating 'displayedDate.format')

This error is located at:
    in DateRangePicker (at DMScanListSceen.js:158)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at TouchableOpacity.js:224)
    in TouchableOpacity (at TouchableOpacity.js:302)
    in ForwardRef (at DMScanListSceen.js:157)
    in RCTView (at View.js:34)
    in View (at DMScanListSceen.js:119)
    in DMScanListScreen
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:620)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:84)
    in MaybeScreen (at CardStack.tsx:613)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:54)
    in MaybeScreenContainer (at CardStack.tsx:495)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at DMScanListNavigator.js:23)
    in DMScanListNavigator (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at ResourceSavingScene.tsx:68)
    in RCTView (at View.js:34)
    in View (at ResourceSavingScene.tsx:63)
    in ResourceSavingScene (at DrawerView.tsx:183)
    in RCTView (at View.js:34)
    in View (at src/index.native.js:123)
    in ScreenContainer (at DrawerView.tsx:162)
    in RCTView (at View.js:34)
    in View (at Drawer.tsx:645)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:240)
    in AnimatedComponent(View) (at Drawer.tsx:638)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:240)
    in AnimatedComponent(View) (at Drawer.tsx:628)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Drawer.tsx:619)
    in DrawerView (at DrawerView.tsx:215)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at DrawerView.tsx:213)
    in RCTView (at View.js:34)
    in View (at DrawerView.tsx:212)
    in DrawerView (at createDrawerNavigator.tsx:47)
    in DrawerNavigator (at DMDrawerNavigator.js:22)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at DMDrawerNavigator.js:21)
    in DrawerAppContainer (at App.js:119)
    in App (at Danny/index.js:10)
    in DMAppProvider (at Danny/index.js:9)
    in ProvideApp (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

[farukozdemirz]

 const [startDate, setStartDate] = useState(null)
 const [endDate, setEndDate] = useState(null)
 const [displayedDate, setDisplayedDate] = useState(moment())

  const setDate = (props) => {
          props.startDate && setStartDate(props.startDate);
          props.endDate && setEndDate(props.endDate);
    }

<DateRangePicker
    onChange={setDate}
    startDate={startDate}
    endDate={endDate}
    range
    displayedDate={displayedDate}>
</DateRangePicker>

this works for me

[devonkoch]

This also solved it for me:

const [dates, setDates] = useState({
  startDate: null,
  endDate: null,
  displayedDate: moment(),
})

const handleDateChange = (newDates) => {
  setDates({ ...dates, ...newDates })
}

...

<DateRangePicker
  onChange={handleDateChange}
  startDate={dates.startDate}
  endDate={dates.endDate}
  displayedDate={dates.displayedDate}
/>

[georrgee]

This also solved it for me:

const [dates, setDates] = useState({
  startDate: null,
  endDate: null,
  displayedDate: moment(),
})

const handleDateChange = (newDates) => {
  setDates({ ...dates, ...newDates })
}

...

<DateRangePicker
  onChange={handleDateChange}
  startDate={dates.startDate}
  endDate={dates.endDate}
  displayedDate={dates.displayedDate}
/>

This definitely worked for me 🤝

[Riaz5687]

 const [startDate, setStartDate] = useState(null)
 const [endDate, setEndDate] = useState(null)
 const [displayedDate, setDisplayedDate] = useState(moment())

  const setDate = (props) => {
          props.startDate && setStartDate(props.startDate);
          props.endDate && setEndDate(props.endDate);
    }

<DateRangePicker
    onChange={setDate}
    startDate={startDate}
    endDate={endDate}
    range
    displayedDate={displayedDate}>
</DateRangePicker>

this works for me

worked for me, but unable to change the month from icon < or >