reactjs - remove "Warning: Using UNSAFE_componentWillReceiveProps" from React application

Question

I connect my dashboard component to my firestore database with this code:

const mapStateToProps = (state: any) => {
  console.log(state);
  return {
    projects: state.project.projects
  } 
}

export default compose<React.FunctionComponent>(
  connect(mapStateToProps),
  firestoreConnect([
    { collection: 'projects' }
  ])
)(Dashboard);

And I obtain the warning: Warning: Using UNSAFE_componentWillReceiveProps. Checking the docs1 and docs2 I tried to remove the warning triying to place this logic somewhere else, as the error advices * Move data fetching code or side effects to componentDidUpdate..

However when I move this logic I am not able to fetch the data from my database.

Removing <React.StrictMode> it disappears but I would like to know what is the warning suggested approach.

I tried static getDerivedStateFromProps(props:any, state:any) but it produces an error dur to the state being null.

I also tried componentDidUpdate(prevProps:IProjectState, nextProps:IProjectState) but when the func gets called, nextProps is null. I would expect to see my new projects there to update the components content, but I don't.

Error screenshot:

question from:https://stackoverflow.com/questions/65874862/remove-warning-using-unsafe-componentwillreceiveprops-from-react-application

Answer 1

Waitting for answers