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>
);
}
}