app-route-06.js

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

class Info extends Component {
  get defaultState() {
    return {
      coin: "",
      data: {},
      con: false
    }
  }
  update(state) {
    if (this.state.coin === state.coin) {
      return this.render();
    }
    this.setState({ path: state.path, coin: state.coin });
    return fetch(`https://min-api.cryptocompare.com/data/coin/generalinfo?fsyms=${state.coin}&tsym=USD`)
      .then(b => b.json())
      .then(data => {
        const coinInfo = data.Data[0] ? data.Data[0].CoinInfo : {};
        return this.setState({ data: coinInfo });
      });
  }
  render() {
    if (!this.state.coin) {
      return;
    }
    const {data:card} = this.state;
    return this.html`
      <div class="card col-12 mb-3">
        <div class="row no-gutters">
          <div class="col-3 col-md-2 col-lg-1 d-flex align-items-center">
            <img src="${`https://www.cryptocompare.com${card.ImageUrl}`}" class="card-img" alt="${card.FullName}">
          </div>
          <div class="col-9">
            <div class="card-body">
              <h5 class="card-title">${card.FullName}</h5>
              <p class="card-text">${card.Name}</p>
              <p class="card-text">
                <a 
                  class="small" 
                  target="_blank" 
                  href="${`https://www.cryptocompare.com${card.Url}`}">
                  Cryptocompare details page
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    `;
  }
}

export default Info;