UNSAFE_componentWillReceiveProps(nextProps) in functional component

Question

I have a class based component as below:

class NeedsApprovalEditTransactionInfoContainer extends React.Component {
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (
      nextProps.updateAllocationSuccess &&
      nextProps.updateAllocationSuccess !== this.props.updateAllocationSuccess
    ) {
      this.props.updateNeedsApprovalAllocationStatus(false);
      this.props.route.params.refreshSelf();
      this.props.navigation.goBack();
    }
  }

  componentDidMount() {
    this.props.needsApprovalTransactionManagementRules(
      this.props.expenseReportId
    );
  }
}

how can i convert this into functional component

i tried to use useEffect lifecycle method but confused since i am new to react JS

Answer 1

Here is the functional component for this.

import React, { useEffect } from 'react';

const NeedsApprovalEditTransactionInfoContainer = ({
  updateAllocationSuccess,
  updateNeedsApprovalAllocationStatus,
  route,
  navigation,
  expenseReportId,
  needsApprovalTransactionManagementRules,
}) => {
  useEffect(() => {
    needsApprovalTransactionManagementRules(expenseReportId);
  }, []);

  useEffect(() => {
    if (updateAllocationSuccess) {
      updateNeedsApprovalAllocationStatus(false);
      route.params.refreshSelf();
      navigation.goBack();
    }
  }, [updateAllocationSuccess]);

  return null; // Adjust this according to your component's rendering needs
};

export default NeedsApprovalEditTransactionInfoContainer;