Search After Stop Typing React Component

In this post I’m going to go through how to implement a search criteria component that only invokes the search in a calling component after the user has stopped typing.

So, we have the following search criteria component that invokes the search on a submit button at the moment:


… and this component is referenced like the following in a calling component:

At the moment, our submit button triggers the form’s submit which in tern calls handleSubmit() which then calls this.props.doSearch in our calling component to invoke the search (our calling component actually does the search).

Here’s what our component looks like at the moment:

We want to remove the submit button and just have the search invoke when the user stops typing.

So, let’s first remove the form and submit button from our render function:

Now let’s just invoke the search in handleCriteriaChange after we have set the criteria in the state:

So, our component invokes the search on every keystroke that the user does:

Not quite what we want!

We need to “debounce” the search. That’s where the debounce function in the excellent lodash library comes in.

So, let’s bring lodash and the TypeScript types into our project:

We now need to import just the debounce function into our component:

If we look at the docs, debounce just creates another function that delays calling another function. So, let’s create our “debounce” function leaving the console.log() so that we can check that doSearch is only being called when the user has stopped typing:


… and let’s call our new function from handleCriteriaChange:


… and let’s give this a try:

… which is just what we want!

Here’s the full code for our debouncing search criteria component:

Connect with me:RSSGitHubTwitterLinkedIn

Formatting dates and numbers in React

Formatting numbers and dates is a common requirement for lots of apps but how do we do this in react apps?

Let’s say we have a component in our app that shows a list of customers, looking like this:

… and here’s the current code for this component:

… with the following data:

You can see that we need to clean up the revenue and first sale data by formatting them.

Formatting numbers

We can use Intl.NumberFormat to format the revenue:


In the above example we are formatting to revenue using Great British locale, using the Great British currency style.

So, we now have this:

But what if we don’t want the decimals in the revenue? We just add the min and max fraction digits in the options:


Formatting dates

We could just use toLocaleDateString instead of toString:


… which gives us a nice short date:

However, we can use Intl.DateTimeFormat to gain more control on the formatting:


Here we are specifying a 2 digit day, a long month and a 4 digit year.

So, here’s our final CustomerSearchResults component code:


… and here’s what it looks like:

Much better!

Connect with me:RSSGitHubTwitterLinkedIn

Building a simple component in React.js v2

I’ve been using React again recently. It’s come along way in the last couple of years since I last blogged on building a simple search component. In this post I’ll build this component again using TypeScript with modern React constructs …

This is a link to the old code and below is what it looked like:

Getting started

To scaffold the app I used TypeScript-React-Starter.

The key steps are installing create-react-app …


… and then running it, referencing some TypeScript scripts …


You can then use the following command to start the app …

Basic component structure

The app is going to consist of the following components as we had in v1:

  • Criteria – responsible for the display and entry of the search criteria
  • ResultsList – responsible for the display of the search results
  • Search – this wraps the Criteria and ResultsList components and performs the actual search
  • App – the top level component for our app (essentially just wrapping the Search component)

Criteria component

Let’s start with our Criteria component …

This is a functional component with no state.

It takes the current criteria value in as a property which is then bound to the criteria input value.

It also takes in a delegate function in as a property which is bound to the form’s submit event via our handleSubmit() function.

Finally it takes in a delegate function in as a property which is bound to the criteria input change event via our handleCriteriaChange() function.

We are also using the arrow function notation to avoid the “this” scoping problem.

ResultsList component

Let’s move on to our ResultsList component …


This is also a functional component with no state that takes in the customers to display as a property value.

We make use of Array.prototype.map() to project the customers into a html list.

We also need to remember to include the key attribute so that React can properly manage changes to the html list.

The interface for Customer is:

Search component

Now on to our Search component …


This is our first component which has state which is why we are using a class component. Our state consists of:

  • allCustomers – a hardcoded array of all our customers
  • filteredCustomers – the current array of filtered customers
  • criteria – the current criteria

The state is intialised in the constructor with the filtered customers set to all the customers and the criteria set to an empty string.

The handleCriteriaChange() function catches changes to the criteria that are bubbled up from the Criteria component and sets the criteria bit of the state.

The doSearch() function catches the submit event from the Criteria component. It then does the appropriate filter on the array of customers using Array.prototype.filter(). Lastly it sets the filteredCustomers bit of the state.

The markup simply references the Criteria and ResultsList components, passing the appropriate properties.

App

Lastly, here’s our App functional component which simply wraps the Search component …

That’s it! The code certainly feels a lot cleaner than v1.

Connect with me:RSSGitHubTwitterLinkedIn

Building a simple component in React.js – Part 3 – Displaying Results

In the last post we carried on building some React.js components for searching for a company name and displaying matching names. In this post, we are going to finish this off by displaying the results.

The first thing we need to do is to complete the implementation of the handleSearch function in the Search component.

  • Line 2 initialises some state that we use for the matching customers
  • Line 46 calls a new getCustomers function, which loops through the customers array, checking for matches, builds up an array of matching customers, before returning the built up array
  • Line 47 sets some state to the matching customers
  • Line 53 passes that state into the Results component. When state changes, the Results component will automatically be re-rendered

Lastly, we need to change the Results component.

  • Line 3 interates over the data property we passed into the component (our matching customers) and builds up a list of customer names
  • Line 13 returns the list markup
  • Notice on line 13 you need to pass in the inline style attribute as an object or React.js complains

That completes our components. The full markup can be found here

Connect with me:RSSGitHubTwitterLinkedIn

Building a simple component in React.js – Part 2 – Search Event

In the last post we started building some React.js components for searching for a company name and displaying matching names. In this post, we are going to handle the search request before displaying the results in the final post.

The first thing we need to do is change the Criteria component to handle a click event on the button.

  • Line 13 creates a click event on the “Go” button that is handled by a handleClick function
  • In the handleClick function, line 5 gets the search criteria from the search box
  • Line 6 sets a “onSearch” property to the criteria that the parent component can pick up on

The next thing to do is to wire up the onSearch property in the Search component and react to it.

  • Line 9 wires the onSearch property in the instance of the Criteria component to the handleSearch function
  • For now, the implementation of the handleSearch function is to simply output the search critieria to the console. We will expand on this in our next post

Here’s the code for all our components and the consuming page at this point:

Connect with me:RSSGitHubTwitterLinkedIn

4 reasons to use React.js

I’ve been getting into React.js recently. It’s a JavaScript library for building front-end views. The goals of React.js are to be simple, declarative and composable. Here’s what attracted me …

1. Fast

React.js utilises a virtual DOM. So, when the UI changes, React.js compares the old state to the new state in memory and updates the DOM in the least expensive way. This way, React.js avoids costly DOM operations and makes updates in a very efficient manner.

2. Composable

React.js gives you the ability to create your own components that you can later reuse and combine. The ability to encapsulate UI pieces is a great productivity boost.

A syntax called JSX is used to create components which mixes HTML and JavaScript which at first sounds bad but I’ve actually found beneficial. Since there is no strongly typed interface between HTML and JavaScript I think it makes component more maintainable by having the HTML and JavaScript together.

3. Isomorphic friendly

React can support rendering on the server as well as the client. This makes it SEO friendly if you are building a public facing web site.

Another advantage of server side rendering is a faster start up time for single page apps. The start up time for a SPA tends to be slow because lots of resources need to be downloaded before the first screen renders. Rendering the first screen on the server allows the user to see some useful content whilst all the resources are being downloaded.

4. Battle proven

React.js was created by a collaboration between Facebook and Instagram and was released in 2013. As well as these 2 companies using it, it is also used by many other big companies like Adobe, PayPal and Dropbox. So, React.js has had a lot of heavy use.

Connect with me:RSSGitHubTwitterLinkedIn