How to move away from componentWillReceiveProps

Question

As componentWillReceiveProps is deprecated, How do we migrate the below code?

componentWillReceiveProps (nextProps) {
        if (nextProps.reloadData && nextProps.realoadDataId) {
            this.props.onChange({target: {id: 'reloadData', value: false}})
            this.props.reloadData();
        }

        if (this.props.dataUpdated) {
            this.setState({
                sucessMessage: 'Updated Successfully'
            })
        } 
        if (nextProps.error) {
            this.props.setToast(nextProps.error, true)
        }
        if (nextProps.downloadDataList && nextProps.downloadDataList.length > 0) {
            downloadDataAsExcel(nextProps.downloadDataList);
            this.props.onChange({target: {id: 'downloadDataList', value: null}})
        }
}

Thanks in advance

score 1 · Accepted Answer · answered Jun 12 '23 at 14:48

You can use static getDerivedStateFromProps(nextProps, prevState) method to replicate the above behaviour.

    static getDerivedStateFromProps(nextProps, prevState) {
            if (nextProps.reloadData && nextProps.realoadDataId) {
                nextProps.props.onChange({target: {id: 'reloadData', value: false}})
                nextProps.props.reloadData();
            }
    
            if (nextProps.error) {
                nextProps.setToast(nextProps.error, true)
            }
            
if (nextProps.downloadDataList && nextProps.downloadDataList.length > 0
         {
             downloadDataAsExcel(nextProps.downloadDataList);
                nextProps.onChange({target: {id: 'downloadDataList', value: null}})
    
      }
if (nextProps.dataUpdated) {
                return {
                     sucessMessage: 'Updated Successfully'
                 }
            } 
return null;

}

You can use the return statement to get the state based on the incoming props.

How to move away from componentWillReceiveProps

1 Answers1