I'm a bit old school but with erb and other server side templating I could write;

@items = ['South Africa', 'Zimbabwe', 'Zambia', 'Egypt', 'Malawi']
...
<div class="columns">
  <div class="column">
    <%- @items.each_with_index do |item, index| -%>
      <% if (index >= @items.length / 2) %>
        </div><div class="column">
      <% end %>
      <div class="menu-item">
        <%= item %>
      </div>
    <%- end -%>
  </div>
</div>
...

This would output:

<div class="columns">
  <div class="column">
      <div class="menu-item">
        South Africa  
      </div>
      <div class="menu-item">
        Zimbabwe
      </div>
      <div class="menu-item">
        Zambia
      </div>
    </div>
    <div class="columns">
      <div class="menu-item">
        Egypt  
      </div>
      <div class="menu-item">
        Malawi
      </div>
   </div>
  </div>
</div>

This was useful when items had properties you wanted to "break" on or do odd chunks of HTML. It produces a valid document but at evaluation-time it's not which is why you can't do this with React JSX;

items = ['South Africa', 'Zimbabwe', 'Zambia', 'Egypt', 'Malawi']
...
<div className="columns">
  <div className="column">
    {items.map(item, index) {
      {(index === items.length / 2) ? </div><div className="column">}
      <div className="menu-item">
        {item}
      </div>
    }
  </div>
</div>
...

(Forgive any syntax errors please, writing this on the website not from running code.)

dangerouslySetInnerHTML won't work either as then I think I need to wrap the invalid JSX in another element which breaks the point of doing this.

Any ideas how to do this in JSX? Thank you.