React Form Validation with Formik and Yup

Better forms with less boilerplate code

Photo by Teddy Kelley on Unsplash

There is generally a high learning curve when working with a new library or framework and trying to implement forms. With data-bindings, validation, and UI, it’s not a simple task creating a new form. Our team started developing a React application last year with the plan of adding over a dozen forms. We knew React Hooks was coming and that it would make lifecycle methods and state easier to manage, but that wasn’t going to prevent us from moving forward. When our team was preparing to implement forms, we knew we needed a solid foundation. We didn’t want to be dependent on a framework and we wanted to be able to write our own reusable form components.

Investigation

I started investigating React form solutions and began by following the documentation the React team provides. The examples were very basic and provided just a small piece of the solution.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
handleChange(event) {
    this.setState({value: event.target.value});
  }