How to show results of a map in two or more columns using react

Question

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:

item 1 | item 4
item 2 | item 5
item 3 | item 6

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

I would like to do something like this:

render() {

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

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

Answer 1

Simply map items as you usually do from one array. With that, use the CSS property "columns" to display them as described in the question above.

.container {
  columns: 2 auto;
}