import React from 'react'
import PortfolioEntry from './PortfolioEntry'

export default class PortfolioTable extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      entries: [],
      stockValues: {}, 
      portfolioValue: ''
    }
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      entries: nextProps.portfolioStocks,
      stockValues: nextProps.stockValues,
      portfolioValue: nextProps.portfolioValue
    })
  }

  render() {
    return (
      <table className='portfolioEntryTable'>
        <tr>
          <th style={{ 'textAlign':'center' }}>Asset</th>
          <th style={{ 'textAlign':'center' }}>Qty</th>
          <th style={{ 'textAlign':'center' }}>Value</th>
          <th style={{ 'textAlign':'center' }}>Mix</th>
        </tr>
        {this.state.entries.map((item, index) => (
          this.state.stockValues[item.ticker] !== undefined ? <PortfolioEntry item={item} key={index} stockValues={this.state.stockValues} portfolioValue={this.state.portfolioValue} /> : null
        ))}
      </table>
    )
  }
}
@@ -541,16 +541,34 @@
 Table'%3E%0A
+        %3Ctbody%3E%0A  
         
@@ -568,24 +568,26 @@
        %3Ctr%3E%0A
+  
           %3Ct
@@ -634,32 +634,34 @@
 %3C/th%3E%0A          
+  
 %3Cth style=%7B%7B 'te
@@ -686,24 +686,26 @@
 %7D%7D%3EQty%3C/th%3E%0A
+  
           %3Ct
@@ -752,32 +752,34 @@
 %3C/th%3E%0A          
+  
 %3Cth style=%7B%7B 'te
@@ -820,14 +820,19 @@
     
+  
 %3C/tr%3E%0A
+%0A  
     
@@ -854,16 +854,47 @@
 .entries
+ ?%0A          this.state.entries
 .map((it
@@ -909,16 +909,18 @@
 x) =%3E (%0A
+  
         
@@ -1115,11 +1115,68 @@
     
-))%7D
+  ))%0A          :%0A          null%0A          %7D%0A        %3C/tbody%3E
 %0A   

Add tbody to remove warnings