Object {1: Object, 2: Object, 3: Object, 4: Object, 5: Object, 6: Object}

1 capital_payment :"100",
    currency: "2"
    dudedate : "2017-08-20"

var Heading = React.createClass({
  getInitialState: function() {
      return {
        data : [],
         amount : 1000,
         firstMonth : 0,
         showtable : false <--------- HERE IS THE SHOW TABLE STATE
      };
  },
    showTable : function(){
      console.log('I am here');
      this.setState({showtable : !this.state.showtable}); <----CHANGING STATE HERE
      console.log(this.state.showtable);
    },
    render : function(){
      var amount = this.state.amount;
      var firstMonth = this.state.firstMonth;
      return(
        <div className="container">
          <div className="row">
            <div className="col-xs-4 col-xs-offset-4">
              <div className="form-group">
                <label>How much <span>{amount}</span> </label>
                <input type="text" className="form-control" placeholder="Amount" value={amount} onChange={this.handleChange} />
              </div>
                <button type="submit" className="btn btn-success" onClick={this.loadCommentsFromServer} >Submit</button>
                <button type="submit" className="btn btn-success" onClick = {this.showTable} > Show table </button>
                <hr />
            <!--- HERE IS WHERE THE NEW CLASS SHOULD SHOW UP IF TABLE IS CHANGED -->
                { this.state.showtable ? <tableView data={this.state.data}/> : null }
            </div>
          </div>
        </div>
      );
    }
});
// HERE IS THE TABLEVIEW, AND I HAVE NO CLUE HOW TO DO A FOR LOOP TO RENDER INFORMATION TO THE TABLE
var tableView = React.createClass({
    render: function() {
      console.log(this.props.data);
        return (
          <table className="table">
            <thead>
              <tr>
                <th>amount</th>
                <th>duedate</th>
                <th>currency</th>
              </tr>
            </thead>
            <tbody>
              <tr>
              <!-- Need to know how the forloop is done, is there a easier way? -->
              {this.props.data.map(function(info) {
                return (
                  <tr key={info}>
                    {info.capital_payment},
                    {info.currency},
                    {info.duedate}
                  </tr>
                  );
                })}
              </tr>
            </tbody>
          </table>
        );
    }
});


ReactDOM.render(
  <div>
    <Heading
    name="React JS"
    >
    </Heading>
    <tableView />
    </div>
, document.getElementById('reactBinding'));