import React, { Component } from 'react'
import PropTypes from 'prop-types'
import TableRow from './TableRow/index.js'
import Button from '../../Components/Button/index.js'

export default class Table extends Component {

  static propTypes = {
    tableName: PropTypes.string,
    columnTypes: PropTypes.object.isRequired
  }

  state = {
    addedRows: []
  }

  addRow = () => {
    const defaultValues = Object.keys(this.props.columnTypes).map(() => {return ""})
    const newRow = <TableRow key={this.state.addedRows.length + 1} editing cellTypes={Object.values(this.props.columnTypes)} cellValues={defaultValues} />
    this.setState((prevState) => {
      addedRows: prevState.addedRows.push(newRow)
    })
  }

  render(){
    if(this.props.readOnly){
      return(
        <div>
          {this.props.children}
        </div>
      )
    }else{
      return(
        <div>
          <TableRow 
            readOnly 
            cellValues={Object.keys(this.props.columnTypes)}
            cellTypes={Object.values(this.props.columnTypes)}
          />
          {this.props.children}
          {this.state.addedRows}
          <Button
            className="round"
            buttonText="+"
            onClick={this.addRow}
          />
        </div>
      )
    }
  }

}
@@ -644,26 +644,31 @@
 evState) =%3E 
+(
 %7B%0A
+    
       addedR
@@ -696,26 +696,35 @@
 ows.
-push(
+concat(%5B
 newRow
+%5D
 )%0A    
+ 
-%7D
+   %7D)
 )%0A  

Fix no labeled statement error