I'm fairly new to react and I am starting to be comfortable with building out my own designs, accessing apis, etc...
I am trying to display errors for a signup page and I am setting a local storage variable thats value is the string that django-rest-auth returns in the error data. That part works fine (however if you can help me find a more efficient/straight forward way to pull the message from the error string that would be much appreciated.)
In my signup component, using componentWillReceiveProps, I then set the state of the component's local error variables to the value of the local storage's error variable. (again, I know this is a terrible way to do this)
componentWillReceiveProps() {
const success = localStorage.getItem("signupSuccess");
if (success !== null) {
this.setState({ hasError: true });
const usernameError = localStorage.getItem("usernameError");
const emailError = localStorage.getItem("emailError");
const password1Error = localStorage.getItem("password1Error");
const password2Error = localStorage.getItem("password2Error");
this.setState({ usernameError: usernameError });
this.setState({ emailError: emailError });
this.setState({ password1Error: password1Error });
this.setState({ password2Error: password2Error });
}
localStorage.removeItem("usernameError");
localStorage.removeItem("emailError");
localStorage.removeItem("password1Error");
localStorage.removeItem("password2Error");
console.log(localStorage.getItem("usernameError"));
}
The main issue is that the errors don't update in the Signup component if they change(due to a correction, new problem, etc...) and I think it is because of the lifecycle method I chose.
Can someone explain componentWillReceiveProps or any general misunderstandings I have? Also what lifecycle method should I use so that It keeps updating every time I re-submit?
Thanks