Search code examples
reactjsrecomposereact-dates

updating the state for react-dates


I'm trying to use airbnb react-dates as follows:

function NewEntryModal(props) {
  return <Formik
      initialValues={{}}
      onSubmit={(values, actions) => {
      }}
      render={props => (
        <form onSubmit={props.handleSubmit}>
          <SingleDatePicker
            date={props.date} // momentPropTypes.momentObj or null
            onDateChange={date => props.setDate({ date })} // PropTypes.func.isRequired
            focused={props.focused}
            onFocusChange={(focused) => props.setIsFocused(focused)}
            id="string" // PropTypes.string.isRequired,
          />
          <button type="submit">Submit</button>
        </form>
      )}
    />
}

export default compose(
  withState('isFocused', 'setIsFocused', false),
  withState('date', 'setDate', moment()),
)(NewEntryModal);

I'm using recompose withState to update the date and focused states. However, I'm getting an error saying that setIsFocused is a not a function.

Any feedback will be greatly appreciated.


Solution

  • Actually you have two variables with the same name props

    I think this could solve your problem, I used destructuring parameter for the render function

    function NewEntryModal(props) {
       return <Formik
            initialValues={{}}
            onSubmit={(values, actions) => {}}
            render={({handleSubmit}) => (
              <form onSubmit={handleSubmit}>
                <SingleDatePicker
                  date={props.date}
                  onDateChange={props.setDate}
                  focused={props.focused}
                  onFocusChange={props.setIsFocused}
                  id="string",
                />
                <button type="submit">Submit</button>
             </form>
         )}
       />
    }
    

    By the way, I also changed onDateChange and onFocusChange to

    onDateChange={props.setDate}
    
    onFocusChange={props.setIsFocused} 
    

    because creating additional arrow functions is useless here