September 2015

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

Recommended reading for building great React apps: