ReactJs Form Login and Registration


(Mihai Corciu) #1

Hello guys,
I have a question about forms in React. I am implementing a login and a registration page, but I am faced with a problem.

Since I am using a form, my inputs now become controlled components, so the form’s state contains the strings that are completed by the user(email, password), so that means I have to validate the input in the form itself. Based on this validation, I will alert the user about the validity of the input(this is not so important now).

But since I have 2 different pages(login and registration), I have to use 2 separate forms, the login only has 2 input fields, and the registration form has 4 input fields.
But 2 of these input fields are the same on each form. How do I make it so I reuse the validation that I have implemented in the login form into the registration form? Or should I just re-implement it on registration form? Thing is, I might change the validation over time, so that means I’ll have to copy/paste on the other side, and that might be troublesome.

Is there a way to inherit/clone the first form, and add more functionality to it?


(Gio Logist) #2

You can make a <UserForm /> component, with a “type” prop. Then you only have one component to manage.