I'm trying to implement a custom filter using react bootstrap table 2 in a function component, but when I use the getFilter function to get access to the filter, the setFilter didn't work and filter.text stay at null
const ExempleTable = () => {
const [filter, setFilter] = useState({ text: null });
const columns = [{
dataField: 'text',
text: 'Text',
filter: textFilter({
getFilter: (textFilter) => setFilter({ text: textFilter }),
})
}];
const setTextFilter = (e) => filter.text && filter.text(e.currentTarget.value);
return (
<>
<input onChange={setTextFilter} />
<BootstrapTable
filter={filterFactory()}
data={[{ text: "Je suis un test"}]}
columns={columns}
/>
</>
);
}
Here filter.text is always at null even after the setFilter. Is it possible to do it like that and to make it work ? Is there any workaround to make a programmatically filter inside a function component ?