I've created a date filter for my table that if date exist it shows that data only else it shows all data . It shows all data only even though i entered date it didn't work. I really need this community help for this. i feel exhausted working on this. please guide me ill give my sandbox link : https://codesandbox.io/s/musing-mendel-w4n6g
Hi (Vanakkam) Karthikeyan,
Thank you for sharing the codesandbox link.
The 'componentDidMount' lifecycle method does not get called each time the rsuite daterangepicker triggers onChange, based on my observation. ReactJS documentation here provides more details of when the method is triggered, when it is appropriate to use it, etc.
If it is acceptable to filter the data within the 'async' handleChange method, the filtering works.
Here is one possible implementation:
async handleChange(dates) {
const dtfmt = "yyyy-MM-DDTHH:mm:ss";
const data = await (await fetch("/data.json")).json();
dates && dates.length > 0 ?
(data || []).length &&
this.setState({
startDate: dates[0], // redundant
endDate: dates[1], // redundant
datefilter: data.filter(
d => moment(d.Date, dtfmt).isBetween(
moment(dates[0], dtfmt), moment(dates[1], dtfmt)
)
)
}) :
(data || []).length &&
this.setState({
startDate: '',
endDate: '',
datefilter: data
});
};
Edited the solution above to handle 'empty' dates.
And, this is how it filtered the dates:
If it is mandatory to place the data-load in lifecycle methods, you may want to declare a separate 'async' method & then call that from the relevant lifecycle method/s (may be like componentDidUpdate ?).
