app-route-04.js

import HyperHTMLElement from 'hyperhtml-element/esm';
const {hyper, Component} = HyperHTMLElement;

class Search extends Component {
  constructor() {
    super();
    fetch(`https://min-api.cryptocompare.com/data/all/coinlist`)
      .then(b => b.json())
      .then(data => {
        this.setState({options: data.Data});
      });
  }
  get defaultState() {
    return {
      value: "",
      options: []
    }
  }
  update(state) {
    if (this.state.value === state.coin) {
      return this.render();
    }
    this.setState({value: state.coin});
    return this.render();
  }
  render() {
    return this.html`
      <div class="row">
        <div class="col-sm-3 offset-sm-6 text-right pt-3">
          Select Coin
        </div>
        <div class="col-sm-3 py-2">
          <hyper-input 
            options=${this.state.options}
            value="${this.state.value}" 
            placeholder="Coin">
          </hyper-input>
        </div>
      </div>
    `;
  }
}

export default Search;