interleave react element

by sstur

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

function interleaveArray(array, betweener) {
  var keys = Object.keys(array);
  var interleaved = [];
  if (keys.length > 0) {
    interleaved.push(array[keys[0]]);
  }
  for (var ii = 1; ii < keys.length; ++ii) {
    interleaved.push(betweener);
    interleaved.push(array[keys[ii]]);
  }
  return interleaved;
}

var Demo = React.createClass({

  render: function() {
	  var tokens = interleaveArray(
  		this.props.text.split('\n').map(function(str,i) { return <span key={i} 
className="line
">{str}</span>;}),
      <br />
    );
    
    return (
      <div>
        {tokens}
      </div>
    );
  }
});

React.render(
  <Demo text={'This\ntext\ncontains\nnewlines.'}/>,
  document.body
);