Clear more than one column filters at a time works in a weird way

First of all, thanks @AllenFang for this amazing work. It is helping us a lot.

I’m working with version “react-bootstrap-table2-filter”: “0.1.6” and trying to create a clear button to filter all values on my table. Looking at this example I decided to follow it and set empty value instead of 0 in order to clear the filter and it worked!!

But when I tried to applied same logic to all my columns, I got an error. My second try was to create a new variable so that every column would have its own method that clear the filter. That worked better. My clear button was cleaning both text boxes, and the last column was cleaned. However the first one showed the values of the filters without any filter at the top.

I must also say that even if the table shows a weird status, first column with the values of the filter without having a value at the top, if I try to filter by another value, it works.

Here is part of my code:

let nameFilter,orgFilter;
const clearInfo = () => {
	nameFilter('');
	orgFilter('');
};

const columns = [{
	dataField: 'Value1',
	text: 'Value1',
	sort: true,
	filter: textFilter({
		getFilter: (filter) => {
			nameFilter = filter;
		}
	})
},{
	dataField: 'Value2',
	text: 'Value2',
	sort: true,
	filter: textFilter({
		getFilter: (filter) => {
			orgFilter = filter;
		}
	})
}

//more columns I need to be cleared too

];

//more code .....
<Button bsStyle="primary" bsSize="small" onClick={ clearInfo }>Clear Filters</Button>

Thanks!!

[agarciaffdc]

Thanks @AllenFang !! This new version works!!

In order to help others, let you also know that my code only worked locally. I made few changes in order to make it work on our production enviroment.

class Subscriber extends Component {

	constructor(props) {
		super(props);
		this.state = {
			column1Filter: '',
			column2Filter: '',
		};
	}

	// ...

	render() {
		
		const clearInfo = () => {
			this.setState.column1Filter('');
			this.setState.column2Filter('');
		};

		const columns = [{
			dataField: 'Value1',
			text: 'Value1',
			sort: true,
			filter: textFilter({
				getFilter: (filter) => {
					this.setState.column1Filter = filter;
				}
			})
		},{
			dataField: 'Value2',
			text: 'Value2',
			sort: true,
			filter: textFilter({
				getFilter: (filter) => {
					this.setState.column2Filter = filter;
				}
			})
		}

		//more columns I need to be cleared too

		];

		//....

		<Button bsStyle="primary" bsSize="small" onClick={ clearInfo }>Clear Filters</Button>	

		// ...
	}

	//....
}

Thanks!!

[AllenFang]

https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/05/13/version-bump.html