How to use react-dates with redux-form

Question

I am working on react-dates with redux-form . Logic is already implemented but when I checked the console for it values it showing nothing. I've already tried but could not able to resolve this issue. Could someone please help me how to resolve this issue. Thanks

<Field component={DateRanger} type="text" name="date" label="Select Project" />

Date Component

 export class DateRanger extends Component {
  constructor(props) {
    super(props)
    this.state = {
      startDate: null,
      endDate: null,
      focusedInput: null,
    }
  }

  onFocusChange = (value) => {
    this.setState({ focused: !this.state.focused })
    const { input } = this.props
    input.onFocus(value)
  }

  render() {
    const { startDate, endDate, focusedInput } = this.state
    const { input } = this.props
    return (
      <div className="defaultBorderColor">
        <DateRangePicker
          {...input}
          isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())}
          startDate={startDate}
          className="activeDatePicker"
          date={input.value}
          endDate={endDate}
          startDateId="date_input_start"
          endDateId="date_input_end"
          onDatesChange={({ startDate: dateStart, endDate: dateEnd }) => {
            input.onChange(input.value)
            this.setState(() => {
              return {
                startDate: dateStart,
                endDate: dateEnd,
              }
            })
          }}
          numberOfMonth={1}
          focusedInput={focusedInput}
          onFocusChange={(input) => this.setState({ focusedInput: input })}
          showClearDates
          minimumNights={0}
        />
      </div>
    )
  }
}

Answer 1

You are sending for input.onChange(input.value) the same previous value that redux-form holds. so you are not changing the form state actually.

      onDatesChange={({ startDate: dateStart, endDate: dateEnd }) => {
        input.onChange(input.value)
        this.setState(() => {
          return {
            startDate: dateStart,
            endDate: dateEnd,
          }
        })
      }}

You need to change it to

      input.onChange({
        startDate: dateStart,
        endDate: dateEnd,
      })

i would also point that you dont need, IMO, to both hold an internal state and redux state. this should be a controlled input by redux form. you get input.value and input.onChange