4

So basically in my app I have a funcionality to create new events by filling up a form.

Unfortunately the problem is that I have a DayPicker component with multi select from https://react-day-picker.js.org/examples/selected-multiple and I would like to clear it state on unmount because I want to have new empty calendar in every new form. Without that DayPicker rememebrs old state.

I am also using redux-form from https://redux-form.com/7.3.0/docs/gettingstarted.md/

Any ideas how I could achieve that ?

MultiDayPicker

import React, {Component} from 'react';
import DayPicker, {DateUtils} from 'react-day-picker';
import PropTypes from 'prop-types';

import 'react-day-picker/lib/style.css';

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});
    this.props.input.onChange(selectedDays);
  };

  render() {
    return (
      <div>
        <DayPicker
          selectedDays={this.state.selectedDays}
          onDayClick={this.handleDayClick}
        />
      </div>
    );
  }
}
JustJSFan
  • 143
  • 1
  • 1
  • 6

0 Answers0