import React from 'react';
import { Grid } from 'react-bootstrap';

import NicetyRow from './NicetyRow';

const NicetyDisplay = React.createClass({
    generateRows: function() {
        let dataList = [];
        for (let i = 0; i < this.props.niceties.length; i +=4) {
            let row = [];
            for (let j = 0; j < 4; j++) {
                if ((i + j) < this.props.niceties.length) {
                    row.push(this.props.niceties[i + j]);
                }
            }
            dataList.push(row);
        }
        return dataList;
    },

    render: function() {
        let list = this.generateRows();
        return (
            <div className="niceties">
              <Grid>
                {list.map(function(row) {
                    return (
                        <NicetyRow data={row}/>
                    );
                })}
            </Grid>
                </div>
        );}
});

export default NicetyDisplay;

import React from 'react';
import { Grid } from 'react-bootstrap';

import NicetyRow from './NicetyRow';

const NicetyDisplay = React.createClass({
    generateRows: function() {
        let dataList = [];
        for (let i = 0; i < this.props.niceties.length; i +=4) {
            let row = [];
            for (let j = 0; j < 4; j++) {
                if ((i + j) < this.props.niceties.length) {
                    row.push(this.props.niceties[i + j]);
                }
            }
            dataList.push(row);
        }
        return dataList;
    },

    render: function() {
        let list = this.generateRows();
        return (
            <div className="niceties">
                <Grid>
                    {list.map((row) => (<NicetyRow data={row}/>)}
                </Grid>
            </div>
        );}
});

export default NicetyDisplay;

Refactor to use arrow function and reformat
Refactor to use arrow function and reformat

The brevity of arrow functions are particularly helpful in calls to map.
Refactor to take advantage of that brevity, and reformat the resulting
JSX to be correctly indented.
