Build a multiple-input search form using React Hooks and Semantic UI React part 2: clicking on a result
In the first part of our application, we created a multi-input search form and rendered the search results from the form. You can access the first part of the tutorial here. In this part, we are going to handle clicking on a result and rendering details about it on a new page.
On the search result page, we’ll render the following details; pick up time, drop off time, cost of the trip, pick up location, drop off location, car model and photo, trip distance, trip duration, driver’s name and photo and a map showing the start and end position of the trip. We’ll use the mockup below to guide us in making this page.
Getting Started
Before we get started, we’ll need to install dependencies for rendering the map. The dependencies are react-leaflet and its peer dependencies leaflet by running the following commands yarn add leaflet and after that run, yarn add react-leaflet.
We also need to add leaflet CSS, which we shall add in the head section of the public/index.html file by adding the following code snippet:
Let us also add this money icon in our public/ folder.
Making the MapTrip component
Let us make the MapTrip component which will render our map. The map will have two markers to show the pickup and dropoff locations. Inside our components/ folder, create the file MapTrip.js and update it with the following:
Making the Trip Detail screen
You will notice that if you click on a search result it redirects to an empty page, this is because inside the TripResult component we have a click handler for it but we have not made the screen to render it yet. Below is a screenshot of the aforementioned handler:
Let us make the screen to render the Trip Detail screen. Inside the screens/ folder, create the file TripDetail.js and update it with the following code:
We also need to update the App.js file so that our router can access the Trip Detail screen by importing the TripDetail component and wrapping it within our router. Update App.js to the following:
By doing that, the Trip Detail screen should render when you click on a search result as per our mockup above bringing us to the end of our tutorial. I hope this was helpful, thank you for reading.
