React Goods table

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',
    goodName: 'Товар 1'
}, {
    login: 'User 1',
    goodName: 'Товар 2'
}, {
    login: 'User 1',
    goodName: 'Товар 3'
}, {
    login: 'User 2',
    goodName: 'Товар 4'
}, {
    login: 'User 2',
    goodName: 'Товар 5'
}, {
    login: 'User 3',
    goodName: 'Товар 1'
}];

class GoodsTable {
  constructor() {
    this.state =  {
        goods: goods
    };
  }

  render() {
    var result = this.state.goods.reduce((res, curr) => {
      res[curr.login] = [ ...(res[curr.login] || []), curr.goodName ];
      return res;
    }, {});

    var itemNodes = Object.keys(result).map(userName => (
        	<UserGoodsRow key={userName} user={userName} goods={result[userName]} />
	));
    

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

class UserGoodsRow {
  render() {
    const { user, goods } = this.props;
    return ( 
      <tr>
        <td>{user}</td>
        <td>
            {goods.map((good, i) => <GoodRow key={i} good={good}/>)}
        </td>
      </tr>
    );
  }
}

class GoodRow {
  render() {
    return ( 
      <div className="good-item">{this.props.good}</div>
    );
  }
}

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