How to place two tables in the same view with different data?

Question

I am using reactjs with material-ui and I want to put two tables in the same view with different data but all I am getting so far are errors

const cols = {
  amount : { content : 'Amount' },
  time   : { content : 'Time' },
  date   : { content : 'Date' },
  reason : { content : 'Reason' }
};

const colOrder = [ 'amount', 'time', 'date', 'reason' ];

const rowsIncome = [{
  amount : { content : '$895.33' },
  time   : { content : '22:23 EST' },
  date   : { content : '07/27/2015' },
  reason : { content : 'Reason for income' }
},
{
  amount : { content : '$900.33' },
  time   : { content : '21:43 EST' },
  date   : { content : '07/29/2015' },
  reason : { content : 'Reason for income' }
}];

const rowsOutcome = [{
  amount : { content : '$867.66' },
  time   : { content : '22:23 EST' },
  date   : { content : '07/24/2015' },
  reason : { content : 'Reason for income' }
},
{
  amount : { content : '$798.43' },
  time   : { content : '21:43 EST' },
  date   : { content : '07/25/2015' },
  reason : { content : 'Reason for income' }
}];

export default class PlayersInfo extends Component {

  constructor (props) {
    super(props);
    this.state = { rowData: rowsIncome };
    console.log(this.state);
  }

  static contextTypes = {
    router : React.PropTypes.func
  }

  render () {
    return <div className="container">
      <Grid>
        <h4>Money Income</h4>
        <Row>
          <Column>
            //TABLE WITH ROWSOUTCOME
            <Table
              headerColumns={cols}
              columnOrder={colOrder}
              rowData={this.state.rowData.rowsOutcome} />
            //TABLE WITH ROWSINCOME
            <Table
              headerColumns={cols}
              columnOrder={colOrder}
              rowData={this.state.rowData.rowsIncome} />
            </Column>
        </Row>
      </Grid>;
    </div>;
  };

}

the info that I want to keep different is const rowsIncome and const rowsOutcome

here the Docs for the table component

what I don't understand is how to play with rowData, is allowing me to do something like: rowData.rowsOutcome or rowData.rowsIncome

Answer 1

this.state = { rowData: rowsIncome };

This is not great practice. A better approach is to separate your view into specialised subcomponents and pass on data defined outside of the component class through props. If you separate the table element into a specialized component, then it is easier to tune it until you get no more errors (for feedback on these, please post a link to a jsfiddle or codepen page).

class PlayerIncomeTable extends Component {
    render() {
        const {rows} = this.props;
        const cols = {
          amount : { content : 'Amount' },
          time   : { content : 'Time' },
          date   : { content : 'Date' },
          reason : { content : 'Reason' }
        };
        const colOrder = [ 'amount', 'time', 'date', 'reason' ];

        return <Table
          headerColumns={cols}
          columnOrder={colOrder}
          rowData={rows} 
        />
    }
}

class PlayersInfo extends Component {
  render () {
    var {rowsIncome, rowsOutcome} = this.props;
    return <div className="container">
      <Grid>
        <h4>Money Income</h4>
        <Row>
          <Column>
            <PlayerIncomeTable rows={rowsOutcome} />
            <PlayerIncomeTable rows={rowsIncome} />
           </Column> 
        </Row>
      </Grid>;
    </div>;
  };
}

export default class PlayersIncome extends React.Component {

    const rowsIncome = [{
      amount : { content : '$895.33' },
      time   : { content : '22:23 EST' },
      date   : { content : '07/27/2015' },
      reason : { content : 'Reason for income' }
    },
    {
      amount : { content : '$900.33' },
      time   : { content : '21:43 EST' },
      date   : { content : '07/29/2015' },
      reason : { content : 'Reason for income' }
    }];

    const rowsOutcome = [{
      amount : { content : '$867.66' },
      time   : { content : '22:23 EST' },
      date   : { content : '07/24/2015' },
      reason : { content : 'Reason for income' }
    },
    {
      amount : { content : '$798.43' },
      time   : { content : '21:43 EST' },
      date   : { content : '07/25/2015' },
      reason : { content : 'Reason for income' }
    }];
    return <PlayerInfo rowsIncome={rowsIncome} rowsIncome={rowsOutcome} / >

}