Rxjs + Downshift Autocomplete

autocomplete.jsx

import React from 'react';
import Downshift from 'downshift';
import Rx from 'rxjs';
import { ajax } from 'rxjs/observable/dom/ajax';

const makeUrl = search =>
  `https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=${encodeURIComponent(str)}`;

const input$ = new Rx.Subject();

const search$ = input$
  .debounceTime(400)
  .distinctUntilChanged()
  .filter(input => input.length > 1)
  .switchMap(input =>
    ajax({ url: makeUrl(input), method: 'GET', crossDomain: true })
      .filter(results => !!results)
      .map(({ response }) => response.query.search || [])
  );

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = { results: [] };
  }
  componentDidMount() {
    this.unsubscribe = search$.subscribe(
      results => { this.setState({ results }); },
      console.log,
    );
  }

  componentWillUnMount() {
    this.unsubscribe();
  }

  handleChange = e => {
    input$.next(e.target.value);
  };

  render() {
    return (
      <Downshift
        itemToString={(i) => i.title}
        onChange={this.props.onChange}
        render={({
          getInputProps,
          getItemProps,
          getLabelProps,
          isOpen,
          inputValue,
          highlightedIndex,
          selectedItem,
        }) => (
          <div className="autocomplete-container">
            <label {...getLabelProps()}>Search: </label>
            <input {...getInputProps({ onChange: this.handleChange })} />
            {isOpen ? (
              <div>
                {this.state.results
                  .map((item, index) => (
                    <div
                      {...getItemProps({
                        key: item.pageid,
                        index,
                        item,
                        style: {
                          backgroundColor:
                            highlightedIndex === index ? 'lightgray' : 'white',
                          fontWeight: selectedItem === item ? 'bold' : 'normal',
                        },
                      })}
                    >
                      {item.title}
                    </div>
                  ))}
              </div>
            ) : null}
          </div>
        )}
      />
    );
  }
}