Build a multi-input search form using React Hooks and Semantic UI React part 1: form layout and list results
React Hooks were added in React 16.8. They allow developers to do everything that they can do in class components inside functional components. On the other hand, Semantic UI React according to its documentation, is the official React integration for Semantic UI. It is jQuery Free, has a declarative API, shorthand props, and more.
In this tutorial, we will learn how to use React and Semantic UI React to make a multi-input search form. At the end of the article, we should have a working demo as shown below. You can find the entire source code for the demo here.
Prerequisites
To follow this tutorial, you’ll need to have Node > 6.0 installed. You’ll also need a package manager NPM (this comes packaged with Node) or Yarn(follow the installation guide here).
Basic knowledge of JavaScript and React is also required. You can follow the official React tutorial here to get up to speed with React.
Getting started
Before we get started, we’ll need to set up the project and install project dependencies. We’ll be making use of Create React App to bootstrap our application. To bootstrap our application using Create React App, we’ll run the following command npx create-react-app trips
We’ll be using semantic UI React to build our UI, run the following command to install it after you have navigated into the trips folder yarn add semantic-ui-react and then run yarn start to run the application and visit http://localhost:3000 to view the bootstrapped application.
The layout of the search form and its result
Inside the src/ folder create a new folder, screens/, which will hold the screens of our application, inside screens/ we will create the file TripSearch.js which will display the search form and the file TripSearchResults.js which will display the search results.
Open the TripSearch.js file and update it with the following:
Open the TripSearchResults.js file and update it with the following:
Open the App.js file and update it with the following:
Add the default Semantic UI CSS to the project, open the public/index.html file and add the below CDN CSS somewhere in the head section.
By doing the above, we have the main presentational components for the search form and its results. Our application should now look as shown below:
You will notice you cannot type into the input field, let us make the form usable in the coming sections.
Adding a data store
Let’s create a data object which we will use in our application. Inside the src/ folder, create a new folder data/, inside the data/ folder we will create a file DummyData.js which will hold our data object. Update the file we have created with the following:
In the coming sections, we will use the components we created to filter through this data object and display the results. The search form, the results and the trip details(to be covered in part 2) will be displayed on separate pages and for that, we will need to use some routing mechanism.
Installing Reach Router
Our application will be a single page application, we will use Reach Router to assist in routing. It is an alternative to React Router, you can read more about it here. To install Reach Router run the following command yarn add @reach/router
Making the TripSearch component useable
To make the TripSearch component useable, we will use the useState hook to manage state. We will manage state for the input field, checkbox and the radio buttons. Finally, we will use Reach Router’s navigate function to navigate to the next screen and pass the data from our state to the next component for processing. Update the TripSearch.js file to the following:
Processing the search data
The data from the TripSearch component will be received by the TripSearchResults component via props. The async function prepareFilteredTrips will behave like our HTTP fetch it will handle the data from the input field, checkbox and radio boxes. The input field will handle searches for all text-based properties which are pickup location, dropoff location, trip type, driver name, car make, car model and car number. The checkbox will handle whether a trip is cancelled or completed and the radio buttons will handle distance and duration taken using the functions distanceCompare and durationCompare.
We will call the async function prepareFilteredTrips inside useEffect hook since the prepareFilteredTrips is a side effect. In the second argument of useEffect we will pass the props from TripSearch component to avoid unnecessary re-renders and memory leaks especially if a user navigates the browser using back and forward buttons.
Let us move the trip result card we created in the TripSearchResults component to a separate file as we will use it to render the data from the filtered results. Inside the src/ folder create a new folder components/, inside the components/ folder create a file TripResult.js and update it with the following:
Next, let us update the TripSearchResults.js file in the screens/ folder to the following:
Wrapping the screen components with the router
To enable navigation using Reach Router, let us wrap our screen components in the App component with the Router wrapper from Reach Router and also add path prop to the screen components. Update App.js to the following:
Now our application should work as per the demo in the beginning. We have completed part 1 of our application which was to build a multi-input search form and render the results. In part two we will handle clicking on a result.
