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