React Type Ahead Wikipedia Search Lab

Objectives

  1. Put React and unidirectional data to use
  2. Use AJAX in a small React library

Overview

In this lesson we're going to build an autocomplete component using Wikipedia's Search API.

This is what it's going to look like:

Screenshot

Stores

Our <Autocomplete /> component uses a centralized resultStore store. The store has to keep track of two different things:

  1. The actual search results as returned by Wikipedia's search API.

Before storing the results that the Wikipedia search API returns, we should convert them to an array of objects. This is what Wikipedia gives us by default when hitting the search endpoint:

[
  "search query",
  [
    "search result 1",
    "search result 2",
    "search result 3"
  ],
  [
    "longer description of search result 1",
    "longer description of search result 2",
    "longer description of search result 3"
  ],
  [
    "https://en.wikipedia.org/wiki/search_result_1",
    "https://en.wikipedia.org/wiki/search_result_2",
    "https://en.wikipedia.org/wiki/search_result_3"
  ]
]

While it's possible to store those results directly in the resultStore, having a simple array of objects to iterate over is arguably easier to reason about and write components for.

Therefore, before storing the results in the store, we convert them into the following structure:

[
  {
    "title": "search result 1",
    "description": "longer description of search result 1",
    "link": "https://en.wikipedia.org/wiki/search_result_1"
  },
  {
    "title": "search result 2",
    "description": "longer description of search result 2",
    "link": "https://en.wikipedia.org/wiki/search_result_2"
  },
  {
    "title": "search result 3",
    "description": "longer description of search result 3",
    "link": "https://en.wikipedia.org/wiki/search_result_3"
  }
]
  1. The last time the store was updated.

Since AJAX requests are by definition asynchronous, the order in which we receive responses from Wikipedia's API might be different from the order in which we sent those requests in the first place.

When we receive an "outdated" response to a previous XHR request, we simply discard it.

Therefore we need to keep track of the last time the store was updated. The easiest way to achieve this, is by adding a separate updated property to the store.

Components

Our <Autocomplete /> component consists of a <SearchField /> and <SearchResults /> component.

The <SearchField /> renders an input box where the user can search for arbitrary Wikipedia articles.

The <SearchResults /> component renders the results as received by the API.

Resources

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us