Rendering columns of buttons within div - html

Question

I have a list of languages, and I want to render them each as buttons within a column, within a div. I want to be able to render them based on a variable I set, buttonsPerColumn.
For example, if I have 40 languages, and four columns, I will render 10 buttons per column. If I have 36 languages, I will render 10 buttons for the first three, and 6 for the remainder. However, I am at a loss for how to do this. I have console logged my desired output, however, I would like this in button form. How can I create all of the column and button divs I need within my method, and then output them all at once?
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 (
<React.Fragment>
<div className="languageList">
<div className="languageColumn" />
</div>
</React.Fragment>
);
}
renderButtons = () => {
let buttonsPerColumn = 6;
const languages = LanguageList.getLanguages();
const myArray = LanguageList.arrayFromObject(languages);
var i, language;
let column = 0;
for (i = 0; i < myArray.length; i++) {
language = myArray[i];
console.log("Render " + language + " in column " + column);
if (i == buttonsPerColumn) {
column++;
buttonsPerColumn += buttonsPerColumn;
}
}
};
static arrayFromObject = object => {
var myArray = [];
var key;
for (key in object) {
myArray.push(key);
}
return myArray;
};
static getLanguages = () => {
return {
Azerbaijan: "az",
Albanian: "sq",
Amharic: "am",
English: "en",
Arabic: "ar",
Armenian: "hy",
Afrikaans: "af",
Basque: "eu",
German: "de",
Bashkir: "ba",
Nepali: "ne"
};
};
}
Link to code sandbox:
https://codesandbox.io/s/practical-chatelet-bq589

Answer 1

Try this:
import React, { Component } from "react";
class LanguageList extends Component {
render() {
return (
<React.Fragment>
<div className="languageList">{this.renderButtons()}</div>
</React.Fragment>
);
}
renderButtons = () => {
const buttonsPerColumn = 6;
const languages = LanguageList.getLanguages();
const myArray = LanguageList.arrayFromObject(languages);
const columns = [];
for (let i = 0; i < myArray.length; i++) {
const columnIndex = Math.floor(i / buttonsPerColumn);
if (!columns[columnIndex]) columns[columnIndex] = [];
columns[columnIndex].push(
<button className="languageButton">{myArray[i]}</button>
);
}
return columns.map((singleColumn, index) => (
<div key={index} className="languageColumn">
{singleColumn}
</div>
));
};
static arrayFromObject = object => {
var myArray = [];
var key;
for (key in object) {
myArray.push(key);
}
return myArray;
};
static getLanguages = () => {
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;