content: import React, { Component } from 'react';
  import 'whatwg-fetch';
  import formatMoney from 'accounting-js/lib/formatMoney.js'
  import styles from './ListaMercados.css';
  import ItemMercado from './ItemMercado';
  import nombreMercado from '../ayudas/nombreMercado.json';
  
  
  class ListaMercados extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        items: [],
        datos: []
      };
    }
  
    componentDidMount() {
      const that = this;
      let resCoinMarket = null;
      setInterval(function cadaDiezSegundos() {
        fetch('https://api.coinmarketcap.com/v1/ticker/?limit=3')
        .then(function (response) {
          return response.json()
        }).then(function (json) {
          resCoinMarket = json;
          fetch('https://api.bitso.com/v3/ticker/')
          .then(function (response) {
            return response.json()
          }).then(function (resultadosBitso) {
            const items = resultadosBitso.payload.map((moneda) => {
              let porcentaje = null;
              if (resCoinMarket.find(x => x.id === nombreMercado[moneda.book].id)) {
                porcentaje = resCoinMarket.find(x => x.id === nombreMercado[moneda.book].id).percent_change_24h;
              }
              return {
                nombre: nombreMercado[moneda.book].nombre,
                book_fancy: nombreMercado[moneda.book].book_fancy,
                ultimo: formatMoney(moneda.last),
                porcentaje: porcentaje,
                key: moneda.book,
              };
            });
            that.setState({
              items: items
            });
          }).catch(function (ex) {
            console.log('parsing failed', ex);
          })
        }).catch(function (ex) {
          console.log('parsing failed', ex);
        });
      });
  
    }
  
  
    render() {
      // const { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props;
      return (
        <div className={styles.listaMercados}>
          {this.state.items.length > 0 ? this.state.items.map((item) => {
  
            return (<ItemMercado
              nombre={item.nombre}
              book_fancy={item.book_fancy}
              ultimo={item.ultimo}
              porcentaje={item.porcentaje}
              key={item.key}
            />);
          }) : <ItemMercado /> }
          {}
        </div>
      );
    }
  }
  
  export default ListaMercados;
  