Learn How to Do Form Processing in React using the Built-in Hooks and JSX

What You will Learn

• About the built-in state management hook: `useState()` and how to use it to manage your React components' state.
  
  
• How to build forms in React and associate form input with pieces of the component's local state.
  
  
• How to build working forms using JSX, event listeners and proper event handlers (to take care of the data entered into the form.)
  
  
• How to use the form data submitted by your app's user to set the state of your React component
  
  
• About best practices to follow and gotchas to avoid as you implement form processing in your React apps.

1: Intro

2: Create the App

• Install React
  
  
• Start a new React app
  
  
• Create some custom components for the app
  
  
• Create the component that will hold our user registration form
  
  
• Add some event listeners and handlers to process the user's form input and bind it to the component's local state
  
  
• Apply some very basic CSS styling to the JSX markup

2.1: Setup the App's Structure

• Install ReactJS
  
  
• Open your terminal
  
  
• Run `create-react-app my-app` (where `my-app` is the name of your React app. Replace it with your own app's name)
  
  
• Once the React files and boilerplate are generated:
  
  
  • cd into the `src/` directory of the React app you just created
    
    
  • Create a new `components` folder inside the `src/` directory with: `mkdir components`

2.2 Create the App's Custom Components

2.3 Create the Form Component

• firstName
• lastName
• email
• password

• setting up the component with the proper imports
  
  
• setting up the local state of the component
  
  
• starting a (minimal) form. (We will work on this form in more detail in the following sections.)

    import React, {useState} from 'react'

    const NewUser = () => {
      return (
        <div style={{ margin: '25px'}}>
            <h3 style={{ marginLeft: '25%' }}> Register for a New Account </h3>
            <p>
                Fill out the form below to sign up for a new account on this website.
            </p>
            <form>
                <p>
                    <label> First Name </label>
                    <input 
                        type='text'
                        placeholder='First Name'
                        style={{ marginLeft: '15px'}}
                    />
                </p>
                <p>
                    <label> Last Name </label>
                    <input 
                        type='text'
                        placeholder='Last Name'
                        style={{ marginLeft: '15px'}}
                    />
                </p>
                <p>
                    <label> Your Email </label>
                    <input
                        type='email'
                        placeholder='Your Email' 
                        style={{ marginLeft: '15px'}}
                    />
                </p>
                <p>
                    <label> Password </label>
                    <input
                        type='password'
                        placeholder='Your Password'
                        style={{ marginLeft: '15px'}}
                    />
                </p>
                <p>
                    <input 
                        type='submit'
                        value="Create Account"
                        style={{ marginLeft: '45px'}}
                    />
                </p>
            </form>
    
        </div>
      )
    }
    
    export default NewUser

• Have a `<form>` element to hold the various input elements of the form
  
  
• Have instances of the HTML `<input />` element for each of our component's local state
  
  
• Use some barebones CSS styling for the form and its input elements

2.4: Add Component Local State and Handle Form Events

1. Define the pieces of the component's local state. These will be the firstName, lastName, emailAddress and password states/data. We will use the built-in React `useState()` hook to define the component state.
   
   
2. Bind each of the user-entered form data (in the input elements) to a corresponding piece of the component's local state defined in the previous step.
   
   
3. Add an event listener to each of the input elements of the form so that we can detect when the value of the input element changes so that we can set the value of the component state (that the changed input element is bound to) to the new value of the input element that the user entered.

    import React, {useState} from 'react'

    const NewUser = () => {
    
      const [firstName, setFirstName] = useState('')
      const [lastName, setLastName] = useState('')
      const [emailAddress, setEmailAddress] = useState('')
      const [password, setPassword] = useState('')
    
      return (
        <div style={{ margin: '25px'}}>
            <h3 style={{ marginLeft: '25%' }}> Register for a New Account </h3>
            <p>
                Fill out the form below to sign up for a new account on this website.
            </p>
            <form>
                <p>
                    <label> First Name </label>
                    <input 
                        type='text'
                        placeholder='First Name'
                        style={{ marginLeft: '15px'}}
                        value = {firstName}
                        onChange = {(e) => setFirstName(e.target.value)}
                    />
                </p>
                <p>
                    <label> Last Name </label>
                    <input 
                        type='text'
                        placeholder='Last Name'
                        style={{ marginLeft: '15px'}}
                        value = {lastName}
                        onChange = {(e) => setLastName(e.target.value)}
                    />
                </p>
                <p>
                    <label> Your Email </label>
                    <input
                        type='email'
                        placeholder='Your Email' 
                        style={{ marginLeft: '15px'}}
                        value = {emailAddress}
                        onChange={(e) => setEmailAddress(e.target.value)}
                    />
                </p>
                <p>
                    <label> Password </label>
                    <input
                        type='password'
                        placeholder='Your Password'
                        style={{ marginLeft: '15px'}}
                        value = {password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                </p>
                <p>
                    <input 
                        type='submit'
                        value="Create Account"
                        style={{ marginLeft: '45px'}}
                    />
                </p>
            </form>
    
        </div>
      )
    }
    
    export default NewUser

3: Handle Form Submissions and Form Data Validation

• Add an event listener to the root `<form>` element itself to detect/listen for when the form is submitted. This will trigger calling an event handler (a function) to validate and process the form data that was submitted by the user.
  
  
• Create a function to handle the 'submit' event (which gets triggered when the "Create Account" button is clicked on). This function is what's called an event handler. As the name suggests, it contains the code/logic for handling an event that happens in the component/DOM.

    import React, {useState} from 'react'

    const NewUser = () => {
    
      const [firstName, setFirstName] = useState('')
      const [lastName, setLastName] = useState('')
      const [emailAddress, setEmailAddress] = useState('')
      const [password, setPassword] = useState('')
    
      function submitForm(e){
        e.preventDefault() // To prevent submitting the form to the current page's URL
        // Check if all the form fields contain valid input data
        if(firstName && lastName && emailAddress && password){
            const newUserData = {
                firstName: firstName,
                lastName: lastName,
                emailAddress: emailAddress,
                password: password
            }
            // Ideally, we will make an API call to our backend API server to submit these form data (i.e the JSONified newUserData object).
            // But since we do not have an API server to work with (in this example, at least),
            // we will just console log the form data.
            console.log(`firstName: ${firstName}, lastName: ${lastName}, email Address: ${emailAddress}, password: ${password}`)
        }
      }
    
      return (
        <div style={{ margin: '25px'}}>
            <h3 style={{ marginLeft: '25%' }}> Register for a New Account </h3>
            <p>
                Fill out the form below to sign up for a new account on this website.
            </p>
            <form onSubmit={submitForm}>
                <p>
                    <label> First Name </label>
                    <input 
                        type='text'
                        placeholder='First Name'
                        style={{ marginLeft: '15px'}}
                        value = {firstName}
                        onChange = {(e) => setFirstName(e.target.value)}
                    />
                </p>
                <p>
                    <label> Last Name </label>
                    <input 
                        type='text'
                        placeholder='Last Name'
                        style={{ marginLeft: '15px'}}
                        value = {lastName}
                        onChange = {(e) => setLastName(e.target.value)}
                    />
                </p>
                <p>
                    <label> Your Email </label>
                    <input
                        type='email'
                        placeholder='Your Email' 
                        style={{ marginLeft: '15px'}}
                        value = {emailAddress}
                        onChange={(e) => setEmailAddress(e.target.value)}
                    />
                </p>
                <p>
                    <label> Password </label>
                    <input
                        type='password'
                        placeholder='Your Password'
                        style={{ marginLeft: '15px'}}
                        value = {password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                </p>
                <p>
                    <input 
                        type='submit'
                        value="Create Account"
                        style={{ marginLeft: '45px'}}
                    />
                </p>
            </form>
    
        </div>
      )
    }
    
    export default NewUser

4: Form Event Handlers: Inline or External?

• Inline: This is when the function that handles the DOM event is written within the JSX markup of the component. In our case, we wrote the event handlers for all the `change` events of the `<input />` elements within the JSX markup. We used the `onChange` event listener to listen for whenever the `change` event is emitted on any of the `<input />` elements of the form.
  
  When the event handling code is written within the body of the component's JSX markup, it is referred to as being inline.
  
  
• External Event Handling: Sometimes, the logic for what to do with an event that was triggered in your component may be too complex or multi-pronged/faceted that it won't be practical to write inline (i.e within the JSX markup). In such a case, it will be best to create a JavaScript function within the component but outside the component's `return()` statement. That is what we did with the `submitForm()` event handling function.

• add an event listener to the DOM element that you want to listen to. In our case, we are using the `onSubmit` event listener on the root `<form>` element.
  
  
• pass the external event handler (function) in a pair of curly braces {} to the event listener.

    <form onSubmit={submitForm}>

    <form onSubmit={submitForm()}>

5: What to Do After Processing a Form

• Make an API Call to Submit the Form Data: If you have a backend API server that takes your frontend app's component data and save it to a database, then you should make an API call over HTTP to your backend server and send the JSONified form data to your backend API server.
  
  If you are not familiar with how to make API calls from your React app, please, see the "Learn How to Use the `axios-http` Library in your React App to Make API Calls over HTTP to your Backend Server" guide where I go into details about how to do just that. That guide covers how to make API calls from your React app using the `axios-http` library and using reusable JavaScript classes.
  
  If you prefer to use the `Fetch API` to make API calls and/or would prefer creating custom hooks (instead of classes) to make API calls from your React app, then, see the "Create a Custom Hook to Make CRUD API Calls using the Fetch API" guide for details on how to do that.
  
  
• Re-Render the Component: Your UX needs may necessitate that you re-render the component to display a confirmation message or any error messages you may get after trying to process the submitted form data. In this case, you may need to make use of the built-in `useEffect()` hook to listen for changes in the component's state and then re-render the component when there are changes.
  
  
• Redirect to a Different Page: Sometimes you may just need to redirect the user to a different page once he/she successfully submits a form. This is useful, for example, when you need to redirect a user to a "Member's Area" or a section of the site that's only accessible by authenticated and/or authorized users.

6: Gotchas when Doing Form Processing in React

• No Event Listener on an Input Element: You may forget to add an event listener property on a form's input element. This input element could be an `<input />`, `<textarea>`, `<select>` or other form input elements.
  
  Usually you would put an `onChange` event listener on the element and pass an event handler to it in a pair of curly { } braces (either inline within the JSX markup or as an external JavaScript function).
  
  If you forget to add the event listener to the input element, the related/bound piece of component's local state will never be set and your form won't validate and you may get other related errors.
  
  So, make sure that every one of your form's input element has an `onChange` event listener on it and that there is a valid event handler passed to it (whether inline or as an external function.)
  
  
• No Event Handler Attached: This is related to the first gotcha above. Sometimes, you may add the `onChange` event listener on an input element but then forget to pass it a valid event handler.
  
  This means that, while your component may listen for changes on your form, it will do absolutely nothing about it ... because you didn't pass it the JavaScript code that would have specified what should be done when the entry in an input element changes.
  
  
• Invoking vs Referencing Event Handlers: If you are relatively new to building React web apps, you may not realize that passing in the name of the event handling function with a pair of parentheses () will actually cause the function to execute when the component mounts/loads. But it does. So, when you pass in the event handler, make sure it is NOT invoked; make sure that it IS referenced instead.
  
  
• Not Binding the Form's Input to the Component's Local State: In our `NewUser` component, we made sure that every input element on the registration form is bound to a piece of the component's local state. This we accomplished by using the `value` property on the input element. Failure to do this will mean that the related piece of the component's state will not be set to the value of what the user enters in the form.

<input 
    type='text'
    placeholder='First Name'
    style={{ marginLeft: '15px'}}
    value = {firstName}
    onChange = {(e) => setFirstName(e.target.value)}
/>

7: Best Practices for Handling Form Processing in Your React Components

• Have a Form "submit" Event Handler: This should, ideally, be in an external function. Within the body of this event handler is where you check and validate the entry for all the form fields' data. If the form data is valid, proceed to submit the form. Otherwise, print an error message in the DOM so that the user can try to correct his/her entry before submitting the form.
  
  
• Validate Form Data in the Backend: If your React component requires that the form data be sent to a backend API server, make sure that you also run the form data through your validation checks (in the backend) before you save the form data. Don't make yourself a victim of SQL injections, CORS issues or make yourself a victim of malicious intent by web criminals.
  
  
• Decide on What to Do UX-wise After Form Submissions: Depending on the needs of your app, you may have to print confirmation messages, render error messages or redirect the user to a "success" page so they can start using your web app's features unhindered and unhinged.

8: Technical Reference

• "React Developer" Newsletter
  
  
• Let's Create Our First React App
  
  
• The Frontend Developer's Guide (and Cheatsheet) to Web Events, Event Listeners and Event Handling in React
  
  
• Learn How to Use the `axios-http` Library in your React App to Make API Calls over HTTP to your Backend Server
  
  
• Create a Custom Hook to Make CRUD API Calls using the Fetch API