Pass component state to redux-form

Question

I am using react-day-picker with multi day select http://react-day-picker.js.org/examples/selected-multiple.

My question: Is it possible to pass state of this component:

export default class MultiDayPicker extends Component {
state = {
   selectedDays: []
};

handleDayClick = (day, {selected}) => {
   const {selectedDays} = this.state;

if (selected) {
  const selectedIndex = selectedDays.findIndex(selectedDay =>
    DateUtils.isSameDay(selectedDay, day)
  );

  selectedDays.splice(selectedIndex, 1);
} else {
  selectedDays.push(day);
}
this.setState({selectedDays});
 };

 render() {
return (
  <div>
    <DayPicker
      selectedDays={this.state.selectedDays}
      onDayClick={this.handleDayClick}
    />
  </div>
);

to redux-form state ??

<Field
    name="dates"
    component={MutliDayPicker}
/>

Answer 1

In your custom MultiDayPicker component you have to call redux-form input.onChange method.

So in order to change the redux-form state, when your MultiDayPicker value is changed, you have to add the following redux-form api call in handleDayClick:

handleDayClick( day, { selected }) => {
  // Rest code here ...

  // Update `redux-form` state
  this.props.input.onChange(selectedDays)
}

Also you have to think about the rest redux-form input properties and callbacks and decide for which ones to add support. Here's the full list.