Introduction

In this article, we are going to look at a form of pagination that involves using a load more button and infinite scrolling when fetching more data. This method of pagination is useful in cases where referencing a page for later purposes is not needed. For example, social media posts, video posts and others. If you need your users to reference a page of a list of data, then perhaps you should consider using the traditional pagination technique. The scope of this article will be implementing a load more button, infinite scrolling, using a third party API endpoint with paginated…


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…


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

Njihia Mark

Software developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store