TextWithLineBreaks React component

TextWithLineBreaks.jsx

var _ = require('lodash');
var React = require('react');

module.exports = React.createClass({
    displayName: 'TextWithLineBreaks',
    render: function () {
        var nodes = [];
        var fragments = this.props.text.split('\n');
        var key = 0;

        _.each(fragments, function (fragment) {
            nodes.push(
                <span key={key}>{fragment}</span>
            );
            key++;

            nodes.push(
                <br key={key} />
            );
            key++;
        });

        // Remove extra last <br /> tag.
        nodes.pop();

        return (
            <span className="text-with-line-breaks">
                {nodes}
            </span>
        );
    }
});