Soy un poco de la vieja escuela, pero con erb y otras plantillas del lado del servidor podría escribir;

 @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> ...

Esto daría como resultado:

 <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>

Esto fue útil cuando los elementos tenían propiedades en las que quería "romper" o hacer fragmentos extraños de HTML. Produce un documento válido, pero en el momento de la evaluación no lo es, por eso no puede hacer esto con 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> ...

(Perdone cualquier error de sintaxis, por favor, escriba esto en el sitio web, no desde el código en ejecución).

dangerouslySetInnerHTML tampoco funcionará, ya que creo que necesito envolver el JSX inválido en otro elemento que rompe el punto de hacer esto.

¿Alguna idea de cómo hacer esto en JSX? Gracias.