import React, { Component, PropTypes } from 'react';
import ServerListItem from './server-list-item.jsx';
import Message from './message.jsx';


export default class ServerList extends Component {
  static propTypes = {
    servers: PropTypes.array.isRequired,
    onEditClick: PropTypes.func.isRequired,
    onConnectClick: PropTypes.func.isRequired,
  }

  constructor(props, context) {
    super(props, context);
  }

  groupItemsInRows(items) {
    const itemsPerRow = 4;
    return items.reduce((rows, item, index) => {
      const position = Math.floor(index / itemsPerRow);
      if (!rows[position]) {
        rows[position] = [];
      }

      rows[position].push(item);
      return rows;
    }, []);
  }

  render() {
    const { servers, onEditClick, onConnectClick } = this.props;

    if (!servers.length) {
      return <Message message="No results" type="info" />;
    }

    return (
      <div className="ui grid">
        {this.groupItemsInRows(servers).map((row, rowIdx) =>
          <div key={rowIdx} className="doubling four column row">
            {row.map(server =>
              <div key={`${server.name}_${server.client}`} className="wide column">
                <div className="ui">
                  <ServerListItem
                    onConnectClick={() => onConnectClick(server) }
                    onEditClick={() => onEditClick(server) }
                    server={server} />
                  </div>
              </div>
            )}
          </div>
        )}
      </div>
    );
  }
}

import React, { Component, PropTypes } from 'react';
import ServerListItem from './server-list-item.jsx';
import Message from './message.jsx';


export default class ServerList extends Component {
  static propTypes = {
    servers: PropTypes.array.isRequired,
    onEditClick: PropTypes.func.isRequired,
    onConnectClick: PropTypes.func.isRequired,
  }

  constructor(props, context) {
    super(props, context);
  }

  groupItemsInRows(items) {
    const itemsPerRow = 4;
    return items.reduce((rows, item, index) => {
      const position = Math.floor(index / itemsPerRow);
      if (!rows[position]) {
        rows[position] = [];
      }

      rows[position].push(item);
      return rows;
    }, []);
  }

  render() {
    const { servers, onEditClick, onConnectClick } = this.props;

    if (!servers.length) {
      return <Message message="No results" type="info" />;
    }

    return (
      <div className="ui grid">
        {this.groupItemsInRows(servers).map((row, rowIdx) =>
          <div key={rowIdx} className="doubling four column row">
            {row.map(server =>
              <div key={server.id} className="wide column">
                <div className="ui">
                  <ServerListItem
                    onConnectClick={() => onConnectClick(server) }
                    onEditClick={() => onEditClick(server) }
                    server={server} />
                  </div>
              </div>
            )}
          </div>
        )}
      </div>
    );
  }
}

Use id as key to render server item
Use id as key to render server item

I used the server name + client type in the previous commit. But since we now have the id field again, then makes more sense use the id.