Fixing ‘index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code’ in react

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:

class Volenteer extends Component {
    render() {
        const title = 'רשימת מתנדבים';
        const mode = 'work';
        return (
            <EntityTable 
                columns = {columns}
                title = {title}
                mode = {mode}
                promiseProps = {this.props}
            />
        )
    }
}

export default WithEntity(Volenteer, requestVolunteerData() );

and the HOC code is:

import React, {Component} from 'react';
import { connect } from 'react-redux';

const WithEntity = (EntityComponent, action) => {

  const mapStateToProps = state => {
    return {
      isPending: state.requestEntitiesReducer.isPending,
      entities: state.requestEntitiesReducer.entities,
      error: state.requestEntitiesReducer.error
    }
  }
  
  const mapDispatchToProps = dispatch => {
    return {
      onRequestEntities: () => dispatch(action)
    }
  }

  class WithEntity extends Component {
    
    componentDidMount () {
      this.props.onRequestEntities();
    }

    

    render() {
      return (
        <EntityComponent {...this.props} />
      ) 
    }
  }

  return connect(mapStateToProps, mapDispatchToProps)(WithEntity);
}

export default WithEntity;

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:

const Table = ( {data, columns, mode} ) => {
    <div className = 'table-responsive fixed word-wrap scroll mapping_table'>
      <BootstrapTable 
        bootstrap4
        keyField={'id'}
        data={data}
        columns={columns} 
        responsive = {true}
        condensed
        hover
        pagination={ paginationFactory()} 
        filter={ filterFactory() }
        defaultSortDirection="asc"
      />
    </div>
}
 
export default Table;

here is a picture of the components list:

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