Tengo una lista de idiomas y quiero representarlos cada uno como botones dentro de una columna, dentro de un div. Quiero poder renderizarlos en función de una variable que configuré, buttonsPerColumn.

Por ejemplo, si tengo 40 idiomas y cuatro columnas, renderizaré 10 botones por columna. Si tengo 36 idiomas, renderizaré 10 botones para los primeros tres y 6 para el resto. Sin embargo, no sé cómo hacer esto. Tengo la consola registrada en mi salida deseada, sin embargo, me gustaría esto en forma de botón. ¿Cómo puedo crear todas las divisiones de columnas y botones que necesito dentro de mi método y luego generarlas todas a la vez?

css

.languageList { position: absolute; height: 35%; width: 25%; left: 43%; top: 15%; background-color: #b6bbf4; display: flex; justify-content: space-between; } .languageColumn { position: relative; width: 25%; height: 100%; background-color: red; } 

languagelist.jsx

 class LanguageList extends Component { render() { this.renderButtons(); return ( {amp}lt;React.Fragment{amp}gt; {amp}lt;div className="languageList"{amp}gt; {amp}lt;div className="languageColumn" /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/React.Fragment{amp}gt; ); } renderButtons = () ={amp}gt; { let buttonsPerColumn = 6; const languages = LanguageList.getLanguages(); const myArray = LanguageList.arrayFromObject(languages); var i, language; let column = 0; for (i = 0; i {amp}lt; myArray.length; i  ) { language = myArray[i]; console.log("Render "   language   " in column "   column); if (i == buttonsPerColumn) { column  ; buttonsPerColumn  = buttonsPerColumn; } } }; static arrayFromObject = object ={amp}gt; { var myArray = []; var key; for (key in object) { myArray.push(key); } return myArray; }; static getLanguages = () ={amp}gt; { return { Azerbaijan: "az", Albanian: "sq", Amharic: "am", English: "en", Arabic: "ar", Armenian: "hy", Afrikaans: "af", Basque: "eu", German: "de", Bashkir: "ba", Nepali: "ne" }; }; } 

Enlace al sandbox de código:

https://codesandbox.io/s/practical-chatelet-bq589

Prueba esto:

 import React, { Component } from "react"; class LanguageList extends Component { render() { return ( {amp}lt;React.Fragment{amp}gt; {amp}lt;div className="languageList"{amp}gt;{this.renderButtons()}{amp}lt;/div{amp}gt; {amp}lt;/React.Fragment{amp}gt; ); } renderButtons = () ={amp}gt; { const buttonsPerColumn = 6; const languages = LanguageList.getLanguages(); const myArray = LanguageList.arrayFromObject(languages); const columns = []; for (let i = 0; i {amp}lt; myArray.length; i  ) { const columnIndex = Math.floor(i / buttonsPerColumn); if (!columns[columnIndex]) columns[columnIndex] = []; columns[columnIndex].push( {amp}lt;button className="languageButton"{amp}gt;{myArray[i]}{amp}lt;/button{amp}gt; ); } return columns.map((singleColumn, index) ={amp}gt; ( {amp}lt;div key={index} className="languageColumn"{amp}gt; {singleColumn} {amp}lt;/div{amp}gt; )); }; static arrayFromObject = object ={amp}gt; { var myArray = []; var key; for (key in object) { myArray.push(key); } return myArray; }; static getLanguages = () ={amp}gt; { return { Azerbaijan: "az", Albanian: "sq", Amharic: "am", English: "en", Arabic: "ar", Armenian: "hy", Afrikaans: "af", Basque: "eu", German: "de", Bashkir: "ba", Nepali: "ne" }; }; } export default LanguageList; 
boikevich

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.