CoinList

gistfile1.js

import React, { Component } from 'react'
import * as types from '../constants'

import Coin from './Coin'

class CoinList extends Component {

  constructor(props) {
    super(props)
    this.state = {
      total_valuation: 0,
    }
  }

  componentDidMount() {
  }

  calculateTotalValuation() {
    this.state.total_valuation = 0
    this.props.coin_data.data.map((coin_datum) => {
      for (var i = 0; i < this.props.user_coins.length; i++) {
        if (this.props.user_coins[i][types.USER_COINS_TICKER] == coin_datum.symbol) {
          this.state.total_valuation += coin_datum.price_usd * this.props.user_coins[i][types.USER_COINS_QUANTITY]
        }
      }
    }, this)
  }

  render() {
    const coins = this.props.coin_data.data.map((coin_datum) => {
      for (var i = 0; i < this.props.user_coins.length; i++) {
        if (this.props.user_coins[i][types.USER_COINS_TICKER] == coin_datum.symbol) {
          return (
            <Coin key={coin_datum.symbol} id={coin_datum.symbol} name={coin_datum.name} price={coin_datum.price_usd}
                  quantity={this.props.user_coins[i].quantity} editUserCoinQuantity={this.props.editUserCoinQuantity}
                  removeUserCoin={this.props.removeUserCoin}/>)
        }
      }

    }, this)
    this.calculateTotalValuation()
    return (
      <div>
        <table className="table table-hover">
          <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Symbol</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Value</th>
          </tr>
          </thead>
          <tbody>
          {coins}
          </tbody>
        </table>
        <h2>TOTAL: ${this.state.total_valuation}</h2>
      </div>
    )
  }
}

export default CoinList