{"id":21,"date":"2022-02-02T22:01:00","date_gmt":"2022-02-02T22:01:00","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/michelleliu\/?p=21"},"modified":"2022-02-02T22:01:00","modified_gmt":"2022-02-02T22:01:00","slug":"perfecting-sign-up-system-and-more","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/michelleliu\/2022\/02\/02\/perfecting-sign-up-system-and-more\/","title":{"rendered":"Perfecting Sign Up System and More"},"content":{"rendered":"\n

I had implemented input validations on our user signup and shelter signup pages in week 4, however, it was not working as expected. I noticed the form could be submitted even when there were errors present on the first click of the submit button, but the errors could be detected on the second click and stopped from being sent to the backend. It really made me scratch my head because it seemed like the error state were being updated correctly and there was a condition to submit only if no error was present. <\/p>\n\n\n\n

\"\"
Initial input validation<\/figcaption><\/figure>\n\n\n\n

After trying to fix the issue without success, I decided to turn to Google for answers. And guess what? The answer is simple. setState() is actually async so it doesn’t always update things immediately, therefore doing console.log() and checking a condition based on the updated state right after setState() is probably a bad idea. Silly me! <\/p>\n\n\n\n

Instead of checking the formErrors state in the handleSubmit function, I decided to use useEffect as it can detect changes in the formErrors state and run the provided functions every time it sees a change in formErrors. Voila! The input validations works perfectly fine now. And I also added a function to check if an email already exists in the database when a new user signs up and prevents the user from registering with a duplicate email.<\/p>\n\n\n\n

\"\"
Submit form in useEffect<\/figcaption><\/figure>\n\n\n\n

useEffect also came in handy for pre-filling user data from the backend on the user profile page. It can be called only once when the page renders if we leave the second parameter as an empty array, useEffect(() => {\/\/do something}, []); And that’s not all, you can have multiple useEffects in a component! This allows me to send updated user data to backend through useEffect when user is ready later on. <\/p>\n\n\n\n

Though React is new to me, I’m really enjoying this journey of learning new things as I build our app. I look forward to what I’ll be able to talk about in my next post!<\/p>\n","protected":false},"excerpt":{"rendered":"

I had implemented input validations on our user signup and shelter signup pages in week 4, however, it was not working as expected. I noticed the form could be submitted even when there were errors present on the first click … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":12006,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/michelleliu\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/michelleliu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/michelleliu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/michelleliu\/wp-json\/wp\/v2\/users\/12006"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/michelleliu\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":2,"href":"https:\/\/blogs.oregonstate.edu\/michelleliu\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/blogs.oregonstate.edu\/michelleliu\/wp-json\/wp\/v2\/posts\/21\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/michelleliu\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/michelleliu\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/michelleliu\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}