DataTableFilterDemo event is not triggering

[ddao]

I'm using this example: https://primefaces.org/primereact/showc ... ble/filter to learn PrimeReact.

I'm able to copy the source (js, css, ...) and run it on my Suse Leap Linux box. The application runs.
However SOME of the filters don't work for me i.e. 'Status', 'Representative', 'Date' (other i.e. 'Name' and 'Activity' are working fine).
For example the filter for 'Status' doesn't seem to be triggered.
My browser is chrome and I use developer tool to see what's going on. I set the break point in 'onStatusChange' function however it didn't stop at the break point.
Am I missing something?
Any idea on how to troubleshooting this?

[ddao]

The example here on the primereact website
https://primefaces.org/primereact/showc ... ble/filter
doesn't work for me.

This is what I had to do. Posting here so if anyone would like to comment on the solution:
1) I has to register the onStatusChange callback as this: onChange={this.onStatusChange}
2) And in the onStatusChange callback, I have to find out the index of the array







...
this.statuses = [ 'NEW', 'REJECT', 'VALIDATE', 'APPROVE' ];

...
onStatusChange = (e) => {
if (e.value === null) {
this.setState({ selectedStatus: null });
this.dt.filter(null, 'statusId', 'equals');
}
else {
let selectedStatus = this.statuses.indexOf(e.value) + 1;
this.setState({ selectedStatus: e.value });
this.dt.filter(selectedStatus, 'statusId', 'equals');
}
}


statusBodyTemplate = (rowData) => {
return (
<React.Fragment>
<span className="p-column-title">Status</span>
<span className={`status-badge status-${this.statuses[rowData.statusId-1]}`}>{this.statuses[rowData.statusId-1]}</span>
</React.Fragment>
);
}



statusItemTemplate = (option) => {
return <span className={`status-badge status-${option}`}>{option}</span>;
}


render() {
...
const statusFilter = <Dropdown value={this.state.selectedStatus} options={this.statuses} onChange={this.onStatusChange} itemTemplate={this.statusItemTemplate} placeholder="Status" className="p-column-filter" showClear />;

return (
...
<Column field="statusId" style={{width:'8rem'}} header="Status" body={this.statusBodyTemplate} filter filterElement={statusFilter} />
...

)
}