How To Handle Form and Validation with React?

In this post, let's explore a way to handle form inputs and validations using React without using a third-party library. We will create a Form context that will hold all the states and define all state interactions for all form inputs. When an input is mounted, certain information passed in these inputs will be used to supply to the Form context. Form context will run through all the validations that was registered when the input mounted and set the errors for specific fields. Those will then be passed down to the right input and rendered accordingly.