updating the state for react-dates

Question

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.

From wr SingleDatePicker this component being called share that component code — Hemadri Dasari, Sep 12 '18 at 15:27
is `SingleDatePicker` declared in your `NewEntryModal` component ? — Olivier Boissé, Sep 12 '18 at 15:38
@Student ok now I see what the problem is, The variable `props` is declared twice in your code, please see my answer below — Olivier Boissé, Sep 12 '18 at 17:33

Olivier Boissé · Accepted Answer · 2018-09-12T17:32:20.833

0

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

edited Sep 12 '18 at 17:32

answered Sep 12 '18 at 17:25

Olivier Boissé

15,834
6
38
56

Thanks! I didn't catch two props. For onDateChange and onFocusChange, if not passing the "focused" and "date" without arrow functions, how does it know that it needs to pass those parameters? Arrow functions are my weakness :( – Student Sep 13 '18 at 02:20
you need to pass a function to the parameter `onFocusChange`. Actually `props.setIsFocused` is already a function that already take one parameter so no need to use an arrow function here – Olivier Boissé Sep 13 '18 at 11:23

updating the state for react-dates

1 Answers1