So, you just got started with React and you’ve started building React apps and you’re wondering, how do I work with forms in React? Fret not. In this tutorial, I will explain how React deals with forms and events. I’ll also walk you through how to write code that helps to get input from the different form components and submit the data in a React application. Finally, I’ll show how to use the Formik library to build all kinds of forms, from simple to complex. Forms and events in React Before we begin to write code, it’s important to note how React deals with forms and events. Consider this simple input tag below: <input type="text" placeholder="First Name"> In order to get the data inside the input tag, you need to be able to fetch the content somehow. This doesn’t come easy for React, as there’s no preset API to help with this like Vue.js’ v-model or Angular’s ng-model . It doesn’t come easy, but it can be done. How? By making sure that the view (the input, select, or textarea field) is always in sync with the state. This means that the value for the input element must first be created in the state and then set to that state value in the render() function. Something like the code block below: As you can see in the code block above, the input element has a value of this.state.inputvalue which means the value of the input element is set to be in sync with the inputvalue in the state. This essentially translates to the fact that whatever is typed in the input field will be stored in the state, but there’s a problem here. We made a custom demo for .

No really. Click here to check it out . Click here to see the full demo with network requests

React doesn’t know how to detect if there’s a change in the input element if there was an addition or deletion. Use of a form event handler — onChange to check for changes. This will lead to the code block below: In the code block above, the input element now has an addition to the onChange event. The onChange event will be executed whenever there’s a change in input element and it’s set to execute the handleChange() function. The handleChange() function will always automatically set the state to the current value of the input. One more thing to note is the addition of a new line of code inside the constructor. this.handleChange = this.handleChange.bind(this); The line of code above is used to bind the handleChange() function. This is done because in JavaScript, class methods are not bound by default. If this is not done, the handleChange() function will return undefined when the onChange event is called. So React knows how to store the values from the input element to the state now, but how do we deal with form submission. Very simple. Take a look at the code block below: This is essentially the same code block as seen above, but with a few additions. The form now has an onSubmit event that executes the handleSubmit function. The handleSubmit() function does two things; it logs the current value of the input element whenever the form is submitted and most importantly it prevents the default HTML form behavior of browsing to a new page. The line of code below is also added to the constructor so as to bind the handleSubmit function. this.handleSubmit = this.handleSubmit.bind(this); It’s important to note that there are different methods to binding the functions. Binding them in the constructor is one way, but we can also use fat arrows. See the code block below for reference: The syntax above makes sure that this is bound within the handleSubmit function. The whole process above of syncing the value of the input element to the state is called Controlled Components. We essentially made the React state the single source of truth. The React component that’s responsible for rendering the form is also responsible for what happens whenever a user adds anything to the form. Now that we’ve seen how React deals with forms and how to ensure that the values are in sync with the state, let’s build a proper form with different types of fields, that is, <input> , <textarea> , <select> , radio e.t.c The code block/demo below has all the code needed to demonstrate how to deal with the different form fields. We’ll be going through each of them to see how it works. Input The code implementation for the input field is straightforward. The value is set to be in sync with fullname which is already declared in the state. The onChange event is used to execute the handleChange function if there’s a change in the input field. The only new thing on the input field above is the addition of the name attribute. Because we’ll be dealing with multiple input fields, it’s important to note which of them is actually being modified and the name attribute helps with that. The value of the name attribute has to be the same with the state values declared in the constructor. This is also why there’s a change in the handleChange function. In the code block above, the handleChange function uses the name attribute that was assigned to the different input elements to determine what to do based on the value of the event.target.value Textarea The textarea field also works in a similar fashion to that of the input field. The value is set to be in sync with message which is already declared in the state. It also has the name attribute and it’s set to message . Select The select element has a value attribute that’s set to be in sync with editor which is already declared in the state. Because it’s a dropdown of options, it’s important to know what’s being selected, that’s why each of the option tags has it’s own value attribute with unique contents. Checkbox The implementation of the checkbox element in React forms is a bit different from the others above. Instead of setting the this.state.terms value to the value attribute on the input field, it’s set to the checked attribute. The state value also has to be a boolean value, that means either a truthy or falsy value. Radio Implementing the radio element in React forms works in a similar fashion to that of the checkbox above. The radio elements all have the same name attribute but with different value attributes, as seen above where the value for the Yes radio is Yes and the value for the No radio is No. The checked attribute is used to set the value of the state to either Yes or No as seen above whenever either of the two is selected. Using Formik