JSFiddle - React, Tailwind, and code Playground
by shorif2000
HTML
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.js" integrity="sha256-opK2YC6HciT8cYw3AkGXzte62YszfyubKWiOxrCDUKw=" crossorigin="anonymous"></script>
<div id="app">
</div>
CSS
.App {
text-align: center;
}
.App-header {
background-color: #222;
height: 60px;
padding: 5px;
color: white;
}
.App-title {
font-size: 1.5em;
}
Babel + JSX
/*** Markets.js ***/
// import React from 'react';
// import ReactTable from 'react-table'
let ReactTable = window.ReactTable.default
// import {getHttpRequestJSON} from './HTTP.js'
// import './react-table.css'
let dateStart = new Date();
let marketList = [];
let lastList = [];
class Markets extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
secondsElapsed: 0,
marketData: [],
lastList: lastList,
heading: 'LOADING',
pcnt: 0.1
}
}
getBittrexMarkets = () => {
let self = this;
return new Promise(function(resolve, reject) {
let url = `https://cors-anywhere.herokuapp.com/https://bittrex.com/api/v1.1/public/getmarkets`;
getHttpRequestJSON(url).then((response) => {
response.result.map(function(market, index) {
if(market.IsActive && (
(market.MarketName === 'BTC-SC')
|| (market.MarketName === 'BTC-XRP')
|| (market.MarketName === 'ETH-PAY')
|| (market.MarketName === 'BTC-STRAT')
|| (market.MarketName === 'BTC-LTC')
|| (market.MarketName === 'ETH-ADX')
|| (market.MarketName === 'BTC-QTUM')
|| (market.MarketName === 'BTC-EMC2')
)) {
marketList.push(market);
}
});
return marketList;
})
.then((response) => {
//console.log(lastList);
// eslint-disable-next-line
response.map(function(name, index) {
//let key = name.MarketName;
//let obj = {};
lastList[name.MarketName] = [0,0,0]; // store array
//console.log(obj);
//lastList.push(obj);
});
console.log(lastList);
self.getBittrexMarketData();
})
.catch(error => {
console.log("Failed!", error);
});
});
}
getBittrexMarketData = () => {
let self =...