componentDidUpdate - What am i doing wrong? - node.js

Question

I am trying to bring the error messages from the backend to the frontend using the MERN stack. I am able to receive the error messages in the developer tools, but not able to show the messages in the UI. I am using Redux for the state manager. The console.log() in my concomponentDidUpdate is not working when I am submitting the form. Can someone please clarify what is wrong with my code?
state = {
name: '',
email: '',
phoneNo: null,
dateOfBirth: new Date,
gender: 'Select',
education: '',
checkBox: false,
msg: null
}
static propTypes = {
addInfo: PropTypes.func.isRequired,
info: PropTypes.object.isRequired,
error: PropTypes.object.isRequired
}
componentDidUpdate(prevProps, nextProps) {
const { error } = this.props;
if (error !== nextProps.error) {
console.log("Working");
if (error.id === 'REGISTER_FAIL')
this.setState({ msg: error.msg.msg });
else
this.setState({ msg: null });
}
}

Answer 1

componentDidUpdate() will not be invoked in initial mount and will only be called during component rerenders.
If you need it to be called in initial mount as well as subsequent updates, either duplicate it to componentDidMount or use static getDerivedStateFromProps

Answer 2

Following this docs, componentDidUpdate receive 3 params: prevProps, prevState and snapshot.
In your code, you used it like the next props:
componentDidUpdate(prevProps, nextProps)
It should be something like:
componentDidUpdate(prevProps, prevState){
const { error } = this.props;
// React will call didUpdate after component is updated
// this.props is the nextProps.error as you trying to do
if (error !== prevProps.error) {
console.log("Working");
if (error.id === 'REGISTER_FAIL')
this.setState({ msg: error.msg.msg });
else
this.setState({ msg: null });
}
}
Or you will want to use UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps(nextProps){}