Creating Forms with React Hooks
— The Search Form
As a software developer, the first thing I think of when designing a web app is how the user will interact with my creation. The best way to understand how to develop a website is by putting ourselves in the user’s shoes. When I’m building something, I try to think of all the ways I personally would like to interact with the app, so that I can better understand the user experience. It also helps to look at examples of other websites, especially those that people use on a regular basis. What makes the app work so well? What is it about the design that keeps a user engaged with particular features of the app?
Some of the most visited websites today were either built with React, or make use of React in some way for their UI (User Interface) development. Instagram, Netflix, AirBnB, Reddit, BBC, Dropbox and of course, Facebook (a Facebook developer actually created React!) are all companies we know well that have used or are using React for development. These are websites that lots of people interact with on a daily basis, and one of their commonalities is that they all make good use of forms.
As a user, when visiting a website the things I find myself doing most often are: typing something into a search bar to locate something, or filling out a form with my personal information and then clicking the submit button. Forms are very useful ways for a user to engage with an app, and can also tell the app itself what content to display as the user interacts with its features. When we log in to see our own information and preferences, or submit a form to make a purchase, if we’re playing a game, we can enter information into a form, click submit and get taken to another part of the game. The way that we as users interact with web sites has become such a part of our daily routine, that we hardly even give it a second thought. As users, we are almost on autopilot when interacting with a website. Who would ever guess how much thought and hard work goes into creating a something as simple as a form?
How Is A Form Made In React?
As previously mentioned, to understand React is to also understand user interaction. Creating the UI in React gives developers the ability to take in any user input and make decisions about what content to render on a web page and when to render it. With a form, a user types in some text, and the work behind the scenes begins. Let’s take a look at a simple search form built with React Hooks:
The Search Form
A search form’s job is to listen to user interaction with the form, receive user input in the form of a search “term”, compare that input to an array of stored data, filter out the data that doesn’t match the search term and then return a new array of data, and render it in the browser as the result of that search term. Depending on the hierarchy of the components in the app, where you display the search form and how it will interact with other components will vary. Below, I have outlined a single use-case for creating and implementing a search form:
Basics Steps to Building a Search Form in React:
- Create the search form component and decide where it will be rendered in the app.
- Decide what components will be affected by this search. This is based on your component hierarchy, which determines which components will be the parent or child, and how they are able to pass props and state. It also depends on where the component that holds the list of items to be searched is located, and where the SearchBar component will be rendered.
- Decide where you will need to hold state for the search term. This is usually in the same place the list of items is held, because you will need to filter over this list with the search term. As a general rule, state needs to be held in a place where all components that need it will have access to it.
- Import the useState hook into the component that will hold state for your search term.
- Create a new state variable for the search term, with the setState function as the second argument.
- Set the default state equal to calling the useState() function and passing in a string for testing purposes — choose the name of one of your existing items.
- Set the value for the search based on the search term and pass it down as props to the search component .
- In the SearchBar component, receive the searchTerm as a prop. Destructure this prop in the parameter of the SearchBar component so it’s easy to identify when you use it.
- Use the searchTerm prop to set the value of the input field. Visually we should now be able to see the default value we passed into the useState() function earlier.
- In the component holding state for the search term, use the searchTerm to determine which items will be displayed in the ItemList component by declaring a new variable called displayedItems. Filter through the array of existing items and return only the items that match the search term entered in the search bar.
- We then pass the newly filtered array as props by giving the items attribute the value of displayedItems in the ItemList component.
- If the filter is working, you should now only be able to see the list of items that return true based on the conditions of the filter. In this case, it will be the item that matches the test string we set as a default earlier.
- Set the default state for searchTerm back to an empty string. This will now allow the user to enter a search term into the form field.
- We now need a way to call the setSearchTerm when the user types something into the input field. To do this, we will pass down a reference to the setSearchTerm function as props to the Search component .
- Now we need to receive onSearchChange as a prop in the SearchBar component and destructure it.
- When the value for the input field changes, we want to call the onSearchChange and pass in the new value.
- Now the item list that is displayed in the browser should reflect the value of what has been typed into the search bar. — — — SUCCESS!!
Conclusion:
Forms are powerful React components. Even something that appears as deceptively simple as a search form can have a lot going on behind the curtain. As a developer, keeping track of props and state is vitally important, and when building you should take care and be as well organized as possible. Draw out your component hierarchy before getting to the code, and refer back to it often as you refactor for changes when adding features to your app. Using React Hooks to create forms can create beauty and ease of use not only for the user of the app, but to the developer as well. Happy coding!
Additional Resources:
