app-route-05.js

import HyperHTMLElement from 'hyperhtml-element/esm';
import Search from "./search";
import Tabs from "./tabs";
const { hyper, Component } = HyperHTMLElement;

class Compare extends Component {
  get defaultState() {
    return {
      coin: "",
      path: "/",
      data: []
    }
  }
  update(state) {
    if (this.state.coin === state.coin) {
      return this.render();
    }
    return fetch(`https://min-api.cryptocompare.com/data/top/totalvol?limit=10&tsym=${state.coin}`)
      .then(b => b.json())
      .then(data => {
        let datainfo = [];
        if (data.Data.length) {
          datainfo = data.Data.map(coin => coin.CoinInfo);
        }
        return this.setState({ path: state.path, coin: state.coin, data: datainfo });
      });
  }
  render() {
    if (!this.state.coin) {
      return this.html`<div>`;
    }
    return this.html`
      <hyper-table data="${this.state.data}" coin="${this.state.coin}">
        <hyper-column label="ID" attribute="Id"></hyper-column>
        <hyper-column label="Name" attribute="FullName"></hyper-column>
        <hyper-column label="Rate" attribute="data" sortable="false"></hyper-column>
      </hyper-table>
    `;
  }
}

export default Compare;