title: Creating a bootstrap grid from a loop in React
body: <p>I am having trouble using bootstrap to create a grid from a looping function. In the code below, cities_index.jsx has an unordered list(ul) and uses a mapping loop for each item in the array, while cities_index_item is a separate file that creates the li for each item. This operation is happening across two files.</p>
  
  <p>The trouble I'm having is I cannot figure out how to create a row for two li's at a time with a loop. Currently, it is giving each li its own row -- ideally, I would like a have one row for every two li's. I could hardcode them to be that way, but I think it'd be more efficient to have the grid be outputted from the looping function somehow. </p>
  
  <p>Could anyone help? Any assistance would be appreciated!</p>
  
  <pre><code>//cities_index.jsx
  
  ...
  
  render() {
    return (
      &lt;div&gt;
        &lt;ul&gt;
          {
            this.props.cities.map((city, id) =&gt; (
              &lt;CitiesIndexItem key={id} city={city} /&gt;
            ))
          }
        &lt;/ul&gt;
        {this.props.children}
      &lt;/div&gt;
    );
   }
  }
  
  export default CitiesIndex;
  
  
  //cities_index_item.jsx
  
  import React from 'react';
  import { Link } from 'react-router';
  
  const CitiesIndexItem = ({ city, router }) =&gt; (
    &lt;li className="row"&gt;
      &lt;Link to={`/cities/${city.id}`}&gt;
        {city.name}
      &lt;/Link&gt;
    &lt;/li&gt;
  );
  
  export default CitiesIndexItem;
  </code></pre>