How to show results of a map in two or more columns using react : <p>I think I have a simple question, but I can't get a solution to do this with react, I would like show results in two columns like:</p>

<pre><code>item 1 | item 4
item 2 | item 5
item 3 | item 6
</code></pre>

<p>I tried verify if array lenght is 0 or new start column, but I can't draw a start div element without draw the end div element</p>

<p>I would like to do something like this:</p>

<pre><code>render() {

        const secondColumnStart = this.props.result.length / 2;

        return &lt;div className="row"&gt;
                {this.props.result.map((item, i) =&gt; 
                { (i == 0 || i == secondColumnStart) &amp;&amp; &lt;div className="col-md-6"&gt; }
                    item.value
                { (i == 0 || i == secondColumnStart) &amp;&amp; &lt;/div&gt; })}
            &lt;/div&gt;;
    }
</code></pre>
