Here, I have created the redux to store the value and access it anywhere, and yes I am getting the value when the method is getting execute (getting value by the console.) but not able to receive it inside of promise to filter the data and render it.
handleChange = (value) => {
console.log('dateRange handleChange: ', value);
this.props.addReduxData('dateRange', value)
// After storing...
const { dateRange } = this.props
console.log('dateRange: ', dateRange);
}
I also have used the state, to store it and display it, even though it is not rendering in the promise.
Here is the component which is executing promise to render the data accordingly.
<MaterialTable
tableRef={this.tableRef}
title={this.props.title}
data={query =>
new Promise((resolve, reject) => {
console.log('query: ', query)
console.log('dateRange Promise: ', this.props.dateRange)
if (this.props.dateRange) {
console.log('dateRange Called')
if (this.props.dateRange.startDate) {
query.startDate = moment(this.props.dateRange.startDate).format('YYYY-MM-DD')
}
if (this.props.dateRange.endDate) {
query.endDate = moment(this.props.dateRange.endDate).format('YYYY-MM-DD')
}
}
console.log('query 273:', query);
let filters = []
let filter = []
if (query) {
console.log('query: ', query)
console.log('Query Called')
if (query.filters) {
query.filters.map(filter => {
let value = filter.value
if (Array.isArray(filter.value)) {
value = JSON.stringify(filter.value)
}
filters.push({
name: filter.column.field,
value: value
})
return null
})
}
filter = {
page: query.page + 1,
pageSize: query.pageSize,
search: query.search,
orderBy: query.orderBy ? query.orderBy.field : null,
orderDirection: query.orderDirection,
filters: JSON.stringify(filters),
}
console.log('query.startDate: ', query.startDate)
if (query.startDate) {
filter.startDate = query.startDate
}
console.log('query.endDate: ', query.endDate)
if (query.endDate) {
filter.endDate = query.endDate
}
}
console.log('props.url:', this.props.url );
console.log('query:', query );
crudService._getAll(this.props.url, query)
.then(
result => {
if (result.status === 200) {
resolve({
data: result.data.data,
page: result.data.page - 1,
totalCount: Number(result.data.total),
})
}
}
);
})
}
options={options}
actions={actions}
columns={finalColumns}
/>
I have a function to call the handleChange method and after open the modal (materialui-daterange-picker modal).
openDateRangePicker = () => {
console.log('dateRange value: ', this.props.dateRange)
console.log('openDateRangeFilter clicked')
this.props.showModal({
open: true,
dialogWidth: "md",
something: "something...",
somethingBoolean: false,
component: <RenderDateRange open={true} handleChange={this.handleChange} value={this.state.getDateRange} />
})
}
What is the problem?
I am getting the stored value and also receiving the value by both methods (handleChage and openDateRangePicker) but not from the data attribute inside the MaterialTable component.
My trials: I have tried to call it outside the promise and also created a state to call it but there wasn't any change or solution.
Please, guide me to resolve it and achieve the solution. So, it will also help others.