{"size": 1067, "ext": "js", "max_stars_repo_path": "practice-app/frontend/src/components/t-equipments/index.js", "max_stars_repo_name": "baturalp-yoruk/bounswe2019group4", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "practice-app/frontend/src/components/t-equipments/index.js", "max_issues_repo_name": "baturalp-yoruk/bounswe2019group4", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "practice-app/frontend/src/components/t-equipments/index.js", "max_forks_repo_name": "baturalp-yoruk/bounswe2019group4", "max_forks_repo_forks_event_min_datetime": "2022-02-19T18:06:06.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-19T18:06:06.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 20.1320754717, "max_line_length": 60, "alphanum_fraction": 0.4751640112}
import React, { Component } from 'react';
import axios from 'axios';
import "./styles.css";

class TradingEq extends Component {


  constructor(props){
    super(props);

    this.state = {
      data: []
    };
  }

  componentDidMount(){
    axios.get('http://api.dev.arkenstone.ml/t-equipments')
    .then(response => {
      console.log(response);
      this.setState({
          data: response.data,
        }
      );
    })
    .catch(err => {
      console.log(err);
    })
  }

  render(){
    const {data} = this.state;
    return(
      <div>
      <div className='title'>Exchange Rates</div>
        {
          Object.keys(data).map(key=>{
            var value = data[key];
            return(
                <div className='row' key={key}>
                  <span className= 'keys'>{key} </span> 
                  <span className= 'texts'> ratio is </span>
                  <span className= 'values'>{value}</span>
                  
                </div>
              )
            })
        }
      </div>
    )
  }
}

export default TradingEq