var Character = require('./character');
var React = require('react');

var CharactersList = React.createClass({
  render: function () {
    return (
      <div>
        {
          this.props.items.map(function(item, index) {
            return <Character key={index} character={item}/>;
          })
        }
      </div>
    );
  }
});

module.exports = CharactersList;

var Character = require('./character');
var React = require('react');
var chunk = require('lodash/array/chunk');

var CharactersList = React.createClass({
  getCharacters: function() {
    var items = chunk(this.props.items, 4)

    return (
      <div>
        {items.map(function(item, index) {
          return (
            <div className='row'>
              {item.map(function(char, index) {
                return <Character character={char}/>;
              })}
            </div>
          )
        })}
      </div>
    )
  },

  render: function () {
    return (
      <div>
        {this.getCharacters()}
      </div>
    );
  }
});

module.exports = CharactersList;

Add a new method to generate a grid of characters
Add a new method to generate a grid of characters

This will use  the chunk method from lodash to split the entire array
into chunks of 4 characters and then generate a row with each chunk
