I have this higher order component which recieve a comp of volunteer for ex and an action, and then render a table with the volunteer info: the volunteer comp code:
JavaScript
x
17
17
1
class Volenteer extends Component {
2
render() {
3
const title = 'רשימת מתנדבים';
4
const mode = 'work';
5
return (
6
<EntityTable
7
columns = {columns}
8
title = {title}
9
mode = {mode}
10
promiseProps = {this.props}
11
/>
12
)
13
}
14
}
15
16
export default WithEntity(Volenteer, requestVolunteerData() );
17
and the HOC code is:
JavaScript
1
39
39
1
import React, {Component} from 'react';
2
import { connect } from 'react-redux';
3
4
const WithEntity = (EntityComponent, action) => {
5
6
const mapStateToProps = state => {
7
return {
8
isPending: state.requestEntitiesReducer.isPending,
9
entities: state.requestEntitiesReducer.entities,
10
error: state.requestEntitiesReducer.error
11
}
12
}
13
14
const mapDispatchToProps = dispatch => {
15
return {
16
onRequestEntities: () => dispatch(action)
17
}
18
}
19
20
class WithEntity extends Component {
21
22
componentDidMount () {
23
this.props.onRequestEntities();
24
}
25
26
27
28
render() {
29
return (
30
<EntityComponent {this.props} />
31
)
32
}
33
}
34
35
return connect(mapStateToProps, mapDispatchToProps)(WithEntity);
36
}
37
38
export default WithEntity;
39
it works fine but i am getting this warning:
There are similiar question about this , but did not find the solution there, also i have tied to implement componentDidUpdate but it fails. is there a problem by using componentDidMount life cycle?
Edit: the DataProvider, FilterProvider or SortProvider, the components that mentioned in the message, comes from the react-bootstrap-table-2 comp:
JavaScript
1
19
19
1
const Table = ( {data, columns, mode} ) => {
2
<div className = 'table-responsive fixed word-wrap scroll mapping_table'>
3
<BootstrapTable
4
bootstrap4
5
keyField={'id'}
6
data={data}
7
columns={columns}
8
responsive = {true}
9
condensed
10
hover
11
pagination={ paginationFactory()}
12
filter={ filterFactory() }
13
defaultSortDirection="asc"
14
/>
15
</div>
16
}
17
18
export default Table;
19
here is a picture of the components list:
Advertisement
Answer
This is a known problem in react-bootstrap-table-2
component and has nothing to do with the HOC code you’ve pasted.
Your options are:
- ignore the warning and hope nothing breaks
- do the work to fix the library for more modern React and maybe put in a PR – wait for someone else to do the work
- switch to another library