onSort / onFilter cannot use this.setState

UI Components for React
Post Reply
Agustin Caamaño
Posts: 7
Joined: 14 Dec 2021, 17:54

28 Jan 2022, 17:17

Hi,
I'm trying to use the function provided in the documentation to sort or filter with a lazy load table but it throws an error when i try to load information to the state
Here is my code:

Code: Select all

	onSort(event) {
        	console.log("onSort")
        	this.setState({ lazyParams: event }, this.reloadData);
    	}

    	onFilter(event) {
        	console.log("onFilter")
        	event['first'] = 0;
       	 	this.setState({ lazyParams: event }, this.reloadData);
    	}
And the DataTable code:

Code: Select all

	<DataTable
          	lazy
        	ref={(el) => {
                	this.dt = el;
             	}}
                value={this.state.elements}
                className="p-mt-6"
                header={<DataTableHeaderComponent   table={this.state.table} available={this.state.panelUserExist} headerpanelComponents={headerpanelComponents} exportComponents={exportComponents}/>}
                rows={this.state.rows}
                dataKey="id"
                rowHover
                selection={this.state.selectedElements}
               	onSelectionChange={e => this.setState({selectedElements: e.value}, () => {
                	this.toast.show({
                        	severity: 'info',
                                summary: 'Elementos seleccionados',
                                detail: this.state.selectedElements.length === 0 ? "Ninguno" : this.state.selectedElements.length,
                                life: 1500
                   	});
              	})}
               	filterDisplay={this.state.dateColums ? "menu" : "row"}
               	responsiveLayout="scroll"
              	emptyMessage="No elements found."
               	currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                paginator
                paginatorTemplate={templatePaginator}
                selectionMode="multiple"
                metaKeySelection={true}
                dragSelection
                first={this.state.first}
                onPage={this.onCustomPage}
                scrollable
                loading={this.state.loading}
                scrollDirection="both"
                resizableColumns
                columnResizeMode="expand"
                showGridlines
                sortMode="multiple"
                reorderableColumns
                onColReorder={e => this.onColReorder(e)}
                filters={this.state.filters}
                removableSort
               	onValueChange={data => this.setState({filteredData: data})}
                editMode={this.state.editableTable ? "cell" : null}
                size="small"
                onFilter={this.onFilter}
                onSort={this.onSort}
               	sortOrder={this.state.lazyParams.sortOrder}
                sortField={this.state.lazyParams.sortField}
	>
And the error thrown is:
TypeError: this.setState is not a function

mcandu
Posts: 107
Joined: 20 Jan 2021, 16:31

11 Feb 2022, 11:06

Hi,

Did you add

Code: Select all

this.onSort = this.onSort.bind(this);
to constructor like this ?

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests