CODEWITHSUNDEEP
reactjs
Amit
Amit

Reputation: 353

How to filter react table based on drop down data selected?

const filterRowItem = filterRows.filter((row) => row.status === event.target.value);
 this.setState({data:filterRowItem})
 
 /////////////////////
 <ReactTable data={data}

As denoted into the snippet I have one react table in which data is there,This data is giving from the state.

Now into the select dropdown there are values means if user select the item from the drop down based on selected value the react table data is filters on status column.

Here data is already filtered but its only filtered first time not second time, Because first time again I am setting the state as shows in to snippet.How the data array filter without mutating ?

Upvotes: 1

Views: 4543

Answers (1)

extempl
extempl

Reputation: 3137

You should store not filtered list, but filter condition. And filter the list on render:

onFilterChange(event) {
  this.setState({filterByStatus: event.target.value})
}

render() {
  const { sourceRows } = this.props;
  const { filterByStatus } = this.state;

  const filteredRowsByStatus = sourceRows.filter((row) => row.status === filterByStatus);

  // so we filtering each render by filterByStatus stored in the state. 

  return (<ReactTable data={filteredRowsByStatus} />);

}

Upvotes: 2

Related Questions