React Goods table

by Alexey Zuev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container"></div>

CSS

table {
    width: 100%;
    border-collapse: collapse;
}
td {
    border: 1px solid;
    padding: 10px;
    font-family: sans-serif;
    font-size: 14px;
}
.good-item {
    margin-bottom: 1em;
}

.good-item:last-child {
    margin-bottom: 0;
}

JavaScript 1.7

var goods = [{
    Login: 'User 1',
    Good_Name: 'Товар 1'
}, {
    Login: 'User 1',
    Good_Name: 'Товар 2'
}, {
    Login: 'User 1',
    Good_Name: 'Товар 3'
}, {
    Login: 'User 2',
    Good_Name: 'Товар 4'
}, {
    Login: 'User 2',
    Good_Name: 'Товар 5'
}, {
    Login: 'User 3',
    Good_Name: 'Товар 1'
}];

var GoodsTable = React.createClass({
  getInitialState: function () {
    return {
        goods: goods
    };
  },
  render: function () {
    var result = this.state.goods.reduce(function (prev, curr) {
      var num = curr['Login'];
      if (!prev[num]) {
          prev[num] = [];
      }
      
      prev[num].push(curr['Good_Name']);
      return prev;
    }, {});

    var itemNodes = [];
    for (var prop in result) {
      if (result.hasOwnProperty(prop)) {
        itemNodes.push(<GoodsRow user={prop} goods={result[prop]}/>);
      }
    }

    return (
      <table>
        {itemNodes}
      </table>);
  }
});

var GoodsRow = React.createClass({
  render: function () {
    return ( 
      <tr>
        <td>{this.props.user}</td>
        <td>
            {this.props.goods.map(function(good) {
                return (<div className="good-item">{good}</div> );
            })}
        </td>
      </tr>
    );
  }
});

React.render(<GoodsTable /> , document.getElementById('container'));