TextFilter contains an input of type text with both value and defaultValue props. #195
Description
I am trying to implement remote filtering.
My Table Component works fine, but I am getting a warning:
Warning: TextFilter contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://fb.me/react-controlled-components
This is my Component:
const filter = textFilter({
delay: 1000
});
const columns = [
{
text: 'Company Name',
dataField: 'name',
filter
},
{
text: 'Email',
dataField: 'email',
filter
}
];
class CompaniesTable extends Component {
componentWillMount() {
//fetching table data
this.props.fetchCompanies(0, 5);
}
onTableChange = (type, {filters, page, sizePerPage}) => {
// some code that generates a proper url and calls this.props.fetchCompanies
// to get new data and update the table
};
render() {
const {data = [], page, sizePerPage, totalElements} = this.props;
return (
<BootstrapTable keyField='id'
remote={{filter: true}}
data={data}
columns={this.columns}
filter={filterFactory()}
onTableChange={this.onTableChange}/>
)
}
}
function mapStateToProps(state) {
return {
data: getCompaniesTableData(state),
page: getCompaniesTablePage(state),
sizePerPage: getCompaniesTableSize(state),
totalElements: getCompaniesTableTotalElements(state)
};
}
export default withRouter(connect(mapStateToProps, {fetchCompanies})(CompaniesTable));
How can I fix this?
Thanks in advance.